title: $:/plugins/linonetwo/visualization-dashboard/tiddlywiki-ui/Template/CountTagDaysAppearWeek
tags: $:/Tags/VisualizationDashboard/GaugeTemplate $:/Tags/VisualizationDashboard/Number
caption: <<lingo GaugeTemplate/CountTagDaysAppearWeek/Caption $:/plugins/linonetwo/visualization-dashboard/language/>>
description: <<lingo GaugeTemplate/CountTagDaysAppearWeek/Description $:/plugins/linonetwo/visualization-dashboard/language/>>
targetTiddler: 
targetValue: 7
color: #464646

\function dayAppears() [all[tiddlers]field:calendarEntry[yes]in-tagtree-of:inclusive{!!targetTiddler}] :filter[get[startDate]compare:date:gteq<weekstart>compare:date:lteq<now [UTC]YYYY0MM0DD0hh0mm0ssXXX>] +[countdaysappear[]]
\function dayAppearPercentage() [<dayAppears>divide{!!targetValue}multiply[100]floor[]]
\function color() [{!!targetTiddler}get[color]else{!!color}]

<div style="display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%;">

  <$echarts $text=```
  option = {
    series: [
      {
        data: [{
          value: $(dayAppearPercentage)$,
          name: '$(dayAppears)$',
          title: {
            offsetCenter: ['0%', '-10%'],
            fontSize: 30,
          },
          detail: {
            valueAnimation: true,
            offsetCenter: ['0%', '30%'],
          }
        }],
        type: 'gauge',
        startAngle: 90,
        endAngle: -270,
        pointer: {
          show: false
        },
        progress: {
          show: true,
          overlap: false,
          roundCap: true,
          clip: false,
          itemStyle: {
            borderWidth: 1,
            borderColor: '$(color)$',
            color: '$(color)$',
          },
        },
        axisLine: {
          lineStyle: {
            width: 40
          }
        },
        splitLine: {
          show: false,
          distance: 0,
          length: 10
        },
        axisTick: {
          show: false
        },
        axisLabel: {
          show: false,
          distance: 50
        },
        title: {
          fontSize: 14
        },
        detail: {
          width: 50,
          height: 14,
          fontSize: 14,
          color: 'inherit',
          borderColor: 'inherit',
          borderRadius: 20,
          borderWidth: 1,
          formatter: '{value}%'
        }
      }
    ]
  };
  ```/>

  !! {{!!description}}

</div>
