title: $:/plugins/linonetwo/visualization-dashboard/tiddlywiki-ui/Template/LineTagHoursWeek
tags: $:/Tags/VisualizationDashboard/GaugeTemplate $:/Tags/VisualizationDashboard/LineChart
caption: <<lingo GaugeTemplate/LineTagHoursWeek/Caption $:/plugins/linonetwo/visualization-dashboard/language/>>
description: <<lingo GaugeTemplate/LineTagHoursWeek/Description $:/plugins/linonetwo/visualization-dashboard/language/>>
targetTiddler: 
color: #66ccff

\function dayStartDate() [daystart<weekIndex>,<dayIndex>]
\function dayEndDate() [dayend<weekIndex>,<dayIndex>]
\function hoursToday()
  [all[tiddlers]field:calendarEntry[yes]in-tagtree-of:inclusive{!!targetTiddler}] :filter[get[startDate]compare:date:gteq<dayStartDate>compare:date:lteq<dayEndDate>] +[counthours[]]
\end
\function color() [{!!targetTiddler}get[color]else{!!color}]

\procedure series()
<$list filter="[range[0],[3]add<currentDateWeekOffset>]" variable="weekIndex">
{
  name: '{{{ [weekstart<weekIndex>format:date[YYYY MMM DD]] }}} - {{{ [weekend<weekIndex>format:date[YYYY MMM DD]] }}}',
  type: 'line',
  areaStyle: {},
  emphasis: {
    focus: 'series'
  },
  data: [
    <$list filter="[range[7]]" variable="dayIndex">
      <<hoursToday>>,
    </$list>
  ]
},
</$list>
\end

<div style="display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%;">
  <$wikify name="seriesText" text=<<series>>>
    <$echarts $text=```
      option = {
        series: [
          $(seriesText)$
        ],
        title: {
          text: '${[{!!description}]}$'
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            label: {
              backgroundColor: '$(color)$'
            }
          }
        },
        toolbox: {
          feature: {
            saveAsImage: {}
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            boundaryGap: false,
            data: $(montosun)$,
          }
        ],
        yAxis: [
          {
            type: 'value'
          }
        ],
      };
    ```/>
  </$wikify>
</div>
