Eisenhower martix

ℹ️ Матрица Эйзенхауэра — популярный инструмент тайм-менеджмента. Это визуальное представление списка дел, которые отранжированы по двум показателям, обычно это важность и срочность.

Например, в "Первой Форме" мы используем этот инструмент для управления задачами разработки и формирования спринта. Задачи (тикеты) ранжируются по показателям значимости (value) и объема трудозатрат (efforts). Из-за нашей специфики использования матрицы ее "углы" называются у нас "Важно, долго", а не "Важно, не срочно", как это обычно принято.

Матрица реализована с помощью портального блока Smart Html. При наведении мыши на точку всплывает подсказка с кратким описанием, по клику на точку открывается окно с карточкой задачи.

В смарт-выражении отбираются задачи из одной или нескольких категорий, которые вы хотите контролировать. В нашем случае — это категория с тикетами на разработку, где каждому тикету присвоены значения показателей value и efforts. Для позиционирования точки на матрице по этим абсолютным значениям value и efforts вычисляются относительные, как % от максимального.

Выборка для матрицы (запрос T-SQL):

declare @AppPath varchar ( 100 ) = ( select ApplicationPath from Settings ) + '/maintaskform.aspx?TaskID='
declare @Table table ( TaskID int, Link varchar ( 200 ), TaskText varchar ( MAX ), taskEfforts int, taskValue int  )
declare @MaxEfforts int
declare @MaxValue int
 
insert into @Table
  select
    td.TaskID,
     @AppPath + CAST ( td.TaskID as varchar ( 10 ) ) as Link,
    td.TaskText,
    CAST ( ISNULL ( td.ExtParam222NativeValue, 0 ) as int ) as taskEfforts,
    CAST ( ISNULL ( td.ExtParam333NativeValue, 0 ) as int ) as taskValue
  from
    TasksInSubcat111Denormalized td
  where
    td.IsClosed = 0
 
set @MaxEfforts = ( select MAX ( taskEfforts ) from @Table where taskEfforts > 0 and taskValue > 0 )
set @MaxValue = ( select MAX ( taskValue ) from @Table where taskEfforts > 0 and taskValue > 0 )
 
if ( @MaxEfforts = 0 ) set @MaxEfforts = 1
if ( @MaxValue = 0 ) set @MaxValue = 1
 
select
  TaskID,
  Link,
  dbo.fnStripTags ( TaskText ) as TaskText,
  100  ( taskEfforts ) * 100 / @MaxEfforts as Efforts,
  100  ( taskValue ) * 100 / @MaxValue as Value,
  taskEfforts,
  taskValue
from
  @Table
where
  taskEfforts > 0 and taskValue > 0 

Функция dbo.fnStripTags() убирает из текста задачи html-теги, которые могут быть разрешены в отдельных категориях. Шаблон блока:

<style> 
.tooltip {
   z-index: 99999;
   background-color: white; 
   opacity: 0.9; 
   position: absolute; 
   border-color: black; 
   border-style: solid; 
   border-width: 1px; 
   padding: 15px; 
   overflow: visible; 
   width: 250px;
}
.tooltip-s1 {
   opacity: 0.5 !important;
}
.tooltip-s2 {
    opacity: 0.3 !important;
}
.t-header{
   font-family: Arial, sans-serif; 
   font-variant: small-caps; 
   font-size: 10pt; 
   font-weight: bolder;
}
.t-text {
   font-family: Arial, sans-serif; 
   font-size: 10pt; 
   font-weight: bold;
}
.point {
   background-color: #444502; 
   border-radius: 5px;
   width: 10px;
   height: 10px;
   display: block; 
   position: absolute;
   cursor: pointer;
}
.container { 
   overflow: visible; 
   border-radius: 30px; 
   position: relative;
   width: 55%;
   height: 55%;
   padding: 10px;
   background: linear-gradient(to bottom left,  #d4ffdb, #ffd4d4);
}
.container:before {
  padding: 70%; 
}
.point:hover { 
   background-color: #f7f5bc; 
   width: 11px;
   height: 11px; 
   border-radius: 6px; 
}
.label-right {
   position: relative; 
   float: right;
}
.label-common {
   font-family: Arial, sans-serif; 
   font-variant: small-caps; 
   font-size: 10pt; 
   font-weight: bolder;
}
</style>
<div>
  <span class="label-common">Важно, долго</span>
  <span class="label-right label-common">Важно, быстро</span>
</div>
<div id="plot" class="container">
  } 
    <span class="point" data-tooltip="<a target='blank' href='{{link}}' title='Открыть в новом окне' class='t-header'>{{taskID}}</a>
        <p class='t-text'>{{taskText}}</p>
        <p class='t-text'>value: {{taskValue}}<br/>efforts: {{taskEfforts}}</p>"
        style="left: {{value}}%; top: {{efforts}}%" 
        onclick="javascript:radopen('{{link}}');"> 
     </span> 
  } 
</div>
<div> 
  <span class="label-common">Не важно, долго</span>
  <span class="label-right label-common">Не важно, быстро</span>
</div> 

Полезные ссылки

Портальный блок Smart Html