title: $:/plugins/linonetwo/visualization-dashboard/tiddlywiki-ui/Template/SubscriptionTracker
tags: $:/Tags/VisualizationDashboard/GaugeTemplate $:/Tags/VisualizationDashboard/BarChart
caption: <<lingo GaugeTemplate/SubscriptionTracker/Caption $:/plugins/linonetwo/visualization-dashboard/language/>>
description: <<lingo GaugeTemplate/SubscriptionTracker/Description $:/plugins/linonetwo/visualization-dashboard/language/>>
targetTiddler: 
targetTiddlerFilter: [all[tiddlers]field:calendarEntry[yes]has[rrule]]
color: #66ccff

\define lingo-base() $:/plugins/linonetwo/visualization-dashboard/language/
\procedure chartTitle() <<lingo GaugeTemplate/SubscriptionTracker/ChartTitle>>
\procedure emptyText() <<lingo GaugeTemplate/SubscriptionTracker/Empty>>
\procedure nextDueLabel() <<lingo GaugeTemplate/SubscriptionTracker/Tooltip/NextDue>>
\procedure noNextDueLabel() <<lingo GaugeTemplate/SubscriptionTracker/Tooltip/NoNextDue>>
\procedure remainingDaysLabel() <<lingo GaugeTemplate/SubscriptionTracker/Tooltip/RemainingDays>>
\procedure progressLabel() <<lingo GaugeTemplate/SubscriptionTracker/Tooltip/Progress>>
\procedure onBarDoubleClick()
function(params, parentWidget) {
  if (!params || !params.data || !params.data.tiddlerTitle) return;
  $tw.wiki.addTiddler({ title: '$:/layout', text: '' });
  new $tw.Story().navigateTiddler(params.data.tiddlerTitle);
}
\end

<div style="display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%;">
<$wikify name="chartTitleText" text=<<chartTitle>>>
<$wikify name="emptyTextText" text=<<emptyText>>>
<$wikify name="nextDueLabelText" text=<<nextDueLabel>>>
<$wikify name="noNextDueLabelText" text=<<noNextDueLabel>>>
<$wikify name="remainingDaysLabelText" text=<<remainingDaysLabel>>>
<$wikify name="progressLabelText" text=<<progressLabel>>>
<$wikify name="trackerData" text=<<subscriptiontrackerdata>>>
  <$echarts dblclick=<<onBarDoubleClick>> $text=```
    var tracker = $(trackerData)$;
    var items = tracker.items || [];
    option = {
      title: {
        text: '$(chartTitleText)$',
        left: 'center',
      },
      tooltip: {
        trigger: 'item',
        formatter: function(params) {
          var item = items[params.dataIndex];
          if (!item) return '';
          var dueText = item.nextDue ? '$(nextDueLabelText)$: ' + item.nextDue + '<br/>' : '$(noNextDueLabelText)$<br/>';
          var remainingText = Number.isFinite(item.remainingDays) ? '$(remainingDaysLabelText)$: ' + item.remainingDays + '<br/>' : '';
          return item.label + '<br/>' + dueText + remainingText + '$(progressLabelText)$: ' + item.progress + '%';
        }
      },
      grid: {
        left: '2%',
        right: '2%',
        bottom: '2%',
        top: '36px',
        containLabel: true
      },
      xAxis: {
        type: 'value',
        max: 100,
        show: false
      },
      yAxis: {
        type: 'category',
        data: items.map(function(item) { return item.label; }),
        inverse: true,
        axisLine: { show: false },
        axisTick: { show: false },
        axisLabel: {
          width: 120,
          overflow: 'truncate',
          fontSize: 12
        }
      },
      graphic: items.length > 0 ? [] : [{
        type: 'text',
        left: 'center',
        top: 'middle',
        style: {
          text: '$(emptyTextText)$',
          fill: '#888',
          fontSize: 14,
        }
      }],
      series: [
        {
          name: '$(progressLabel)$',
          type: 'bar',
          data: items.map(function(item) {
            return {
              value: item.progress,
              tiddlerTitle: item.title,
              itemStyle: {
                color: item.color || '#66ccff',
                borderRadius: [0, 4, 4, 0]
              }
            };
          }),
          label: {
            show: true,
            position: 'right',
            formatter: '{c}%'
          },
          barMaxWidth: 28
        }
      ]
    };
    ```/>
  </$wikify>
</$wikify>
</$wikify>
</$wikify>
</$wikify>
</$wikify>
</$wikify>
</div>
