Chart UI

Author: Stigmatoz

src/components/TimeIntervalChart.vue

@@ -1,5 +1,6 @@
 <template>
-  <Bar :data="data" :options="options" v-if="isLoaded" />
+  <p class="description">{{ t('intervalChartChart.description') }}</p>
+  <div ref="chart" id="timeIntervalChartD3"></div>
 </template>
 
 <script lang="ts">
@@ -9,22 +10,175 @@ export default {
 </script>
 
 <script lang="ts" setup>
-import { Bar } from 'vue-chartjs';
-import {
-  Chart as ChartJS,
-  Title,
-  Tooltip,
-  Legend,
-  BarElement,
-  LinearScale,
-  CategoryScale,
-} from 'chart.js';
 import { onMounted, ref } from 'vue';
 import { injecStorage } from '../storage/inject-storage';
 import { StorageDeserializeParam } from '../storage/storage-params';
 import { TimeInterval } from '../entity/time-interval';
 import { todayLocalDate } from '../utils/date';
+import { useI18n } from 'vue-i18n';
 import { convertHoursToTime, convertStringTimeIntervalToSeconds } from '../utils/converter';
+import * as d3 from 'd3';
+
+const { t } = useI18n();
+
+const chart = ref<any>();
+
+onMounted(async () => {
+  const timeIntervalList = (await storage.getDeserializeList(
+    StorageDeserializeParam.TIMEINTERVAL_LIST,
+  )) as TimeInterval[];
+
+  // data.intervals.forEach(function (interval) {
+  //   resultArr.push({ domain: data.domain, interval: interval });
+  // });
+  const data = [
+    {
+      domain: 'google.com',
+      interval: '10:12:18-10:25:17',
+    },
+    {
+      domain: 'habr.com',
+      interval: '10:28:18-10:31:17',
+    },
+    {
+      domain: 'medium.com',
+      interval: '11:41:18-11:48:17',
+    },
+    {
+      domain: 'xy.com',
+      interval: '02:41:18-03:01:17',
+    },
+  ];
+  drawIntervalChart(data);
+});
+
+function drawIntervalChart(data) {
+  data.forEach(function (item) {
+    var hFrom = getHourFrom(item.interval);
+    var hTo = getHourTo(item.interval);
+    if (hFrom != hTo) {
+      var sourceTimeFrom = item.interval.split('-')[0].split(':');
+      var sourceTimeTo = item.interval.split('-')[1].split(':');
+      var timeTo = `${sourceTimeFrom[0]}:59:59`;
+      var timeFrom = `${sourceTimeTo[0]}:00:00`;
+      data.push({ domain: item.domain, interval: item.interval.split('-')[0] + '-' + timeTo });
+      data.push({ domain: item.domain, interval: timeFrom + '-' + item.interval.split('-')[1] });
+    }
+  });
+
+  const margin = { top: 10, right: 10, bottom: 20, left: 20 };
+  const width = chart.value.offsetWidth;
+  const height = 400;
+
+  const tickDistance = 4.38;
+
+  const tooltip = d3
+    .select('#timeIntervalChartD3')
+    .append('div')
+    .style('opacity', 0)
+    .style('display', 'none')
+    .style('position', 'absolute')
+    .style('background-color', 'white')
+    .style('color', 'black')
+    .style('border', '1px solid grey')
+    .attr('class', 'tooltip')
+    .style('border-width', '1px')
+    .style('border-radius', '3px')
+    .style('padding', '5px');
+
+  const mouseover = function (e: any) {
+    tooltip.style('opacity', 1).style('display', 'block');
+    d3.select('.tooltip')
+      .style('left', e.layerX + 15 + 'px')
+      .style('top', e.layerY + 15 + 'px');
+  };
+  const mousemove = function (event: any, data: any) {
+    tooltip.html(`<b>${data.domain}</b><br>${data.interval}`);
+  };
+  const mouseleave = function (e: any) {
+    tooltip.style('opacity', 0).style('display', 'none');
+  };
+
+  //create the svg
+  const svg = d3
+    .select('#timeIntervalChartD3')
+    .append('svg')
+    .attr('width', width + margin.left + margin.right)
+    .attr('height', height + margin.top + margin.bottom)
+    .append('g')
+    .attr('transform', `translate(${margin.left},${margin.top})`);
+
+  const y = d3.scaleLinear([height, 0]).domain([0, 60]);
+  const yAxis = d3.axisLeft(y);
+
+  const x = d3.scaleLinear([0, width]).domain([0, 24]);
+  const xAxis = d3.axisBottom(x).ticks(24);
+
+  svg
+    .append('g')
+    .attr('class', 'grid')
+    .style('color', '#e5e5e5')
+    .attr('transform', `translate(0, ${height})`)
+    .call(xAxis.tickSize(-height));
+
+  svg.append('g').attr('class', 'grid').style('color', '#e5e5e5').call(yAxis.tickSize(-width));
+  svg.selectAll('text').style('fill', 'black');
+
+  //draw the bars, offset y and bar height based on data
+  svg
+    .selectAll('.bar')
+    .data(data)
+    .enter()
+    .append('rect')
+    .style('fill', '#5668e2')
+    .style('cursor', 'pointer')
+    .style('stroke-width', '1')
+    .attr('class', 'bar')
+    .attr('x', (data: any) => x(getHourFrom(data.interval)) + 2)
+    .attr('width', 25)
+    .attr('y', (data: any) => y(getMinutesTo(data.interval)) - 1)
+    .attr('height', (data: any) => {
+      const offset = getMinutesTo(data.interval) - getMinutesFrom(data.interval);
+      if (offset == 0) {
+        const offsetSeconds = getSecondsTo(data.interval) - getSecondsFrom(data.interval);
+        if (offsetSeconds <= 3) return 0;
+        else return 1;
+      } else return offset * tickDistance;
+    })
+    .on('mouseover', mouseover)
+    .on('mousemove', mousemove)
+    .on('mouseleave', mouseleave);
+
+  function getHourFrom(interval: string): number {
+    const time = interval.split('-')[0];
+    return Number(time.split(':')[0]);
+  }
+
+  function getHourTo(interval: string): number {
+    var time = interval.split('-')[1];
+    return Number(time.split(':')[0]);
+  }
+
+  function getMinutesFrom(interval: string): number {
+    var time = interval.split('-')[0];
+    return Number(time.split(':')[1]);
+  }
+
+  function getMinutesTo(interval: string): number {
+    var time = interval.split('-')[1];
+    return Number(time.split(':')[1]);
+  }
+
+  function getSecondsFrom(interval: string): number {
+    var time = interval.split('-')[0];
+    return Number(time.split(':')[2]);
+  }
+
+  function getSecondsTo(interval: string): number {
+    var time = interval.split('-')[1];
+    return Number(time.split(':')[2]);
+  }
+}
 
 type DataForChart = {
   summary: number;
@@ -40,8 +194,6 @@ type DomainsInterval = {
 
 const storage = injecStorage();
 
-ChartJS.register(CategoryScale, LinearScale, BarElement, Title, Tooltip, Legend);
-
 const options = ref<any>();
 const data = ref<any>();
 const isLoaded = ref<boolean>();
@@ -164,46 +316,24 @@ async function buildChart() {
     minutes.push(index);
   }
 
-  const dataForChart = fillData(timeIntervalList);
-  data.value = {
-    labels: hours,
-    datasets: dataForChart,
-  };
-
-  options.value = {
-    responsive: true,
-    maintainAspectRatio: false,
-    plugins: {
-      legend: {
-        position: 'none',
-      },
-      tooltip: {
-        callbacks: {
-          label: function (context: any) {
-            return `${context.label}:00-${Number(context.label) + 1}:00 ${convertHoursToTime(
-              context.raw,
-            )}`;
-          },
-        },
-      },
-    },
-    scales: {
-      y: {
-        min: 0,
-        max: 60,
-        ticks: {
-          stepSize: 5,
-        },
-      },
-      x: {
-        stacked: true,
-        min: 0,
-        max: 23,
-      },
-    },
-  };
   isLoaded.value = true;
 }
 
 onMounted(async () => await buildChart());
 </script>
+
+<style scoped>
+.block {
+  display: inline-block;
+  border: 1px rgb(197, 197, 197) solid;
+  background-color: white;
+  height: 40px;
+  width: 40px;
+}
+
+.grid line {
+  stroke: gray;
+  stroke-opacity: 0.2;
+  color: black;
+}
+</style>