Merge pull request #41 from solfacil/feature/multi-axis-line-chart

Gráfico - Múltiplas linhas
solfacil · Jun 30, 2021 · 418c1f9 · 418c1f9
2 parents 68042b7 + 36e661e
commit 418c1f9
Show file tree

Hide file tree

Showing 10 changed files with 516 additions and 13 deletions.
diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@solfacil/components-ui",
   "author": "Solfacil - Fernando Jesus",
-  "version": "0.1.91",
+  "version": "0.1.92",
   "private": false,
   "license": "MIT",
   "description": "Component library based on Vue and Tailwind",

diff --git a/src/assets/scss/_chart_multi-axis-line.scss b/src/assets/scss/_chart_multi-axis-line.scss
@@ -0,0 +1,11 @@
+.multi-axis-line {
+  .print {
+    @apply flex items-center uppercase cursor-pointer text-gray4 text-tiny leading-tight;
+
+    &:before {
+      content: '';
+      @apply w-6 h-6 block mr-1;
+      background: url(~@img/icon/print-image.svg) no-repeat center center;
+    }
+  }
+}
diff --git a/src/components/Charts/Bar/Bar.vue b/src/components/Charts/Bar/Bar.vue
@@ -121,9 +121,6 @@ export default {
           radius: 0,
         },
       },
-      hover: {
-        animationDuration: 1,
-      },
       tooltips: {
         yAlign: 'bottom',
         xAlign: 'center',

diff --git a/src/components/Charts/Bar/ChartBar.stories.js b/src/components/Charts/Bar/ChartBar.stories.js
@@ -21,7 +21,7 @@ export default {
 const Template = (args, { argTypes }) => ({
   props: Object.keys(argTypes),
   components: { ChartBar },
-  template: '<div style="width: 1000px;"><ChartBar v-bind="$props" /></div>',
+  template: '<div style="width: 900px;"><ChartBar v-bind="$props" /></div>',
 });
 
 export const Default = Template.bind({});

diff --git a/src/components/Charts/LineSeries/ChartLineSeries.stories.js b/src/components/Charts/LineSeries/ChartLineSeries.stories.js
@@ -14,7 +14,7 @@ const Template = (args, { argTypes }) => ({
   props: Object.keys(argTypes),
   components: { ChartLineSeries },
   template:
-    '<div style="width: 1000px;"><ChartLineSeries v-bind="$props" /></div>',
+    '<div style="width: 900px;"><ChartLineSeries v-bind="$props" /></div>',
 });
 
 export const Default = Template.bind({});

diff --git a/src/components/Charts/LineSeries/LineSeries.vue b/src/components/Charts/LineSeries/LineSeries.vue
@@ -1,10 +1,38 @@
 <script>
-import { Line } from 'vue-chartjs';
+import Chart from 'chart.js';
+import { generateChart } from 'vue-chartjs';
+
+Chart.defaults.LineWithLine = Chart.defaults.line;
+Chart.controllers.LineWithLine = Chart.controllers.line.extend({
+  draw: function (ease) {
+    Chart.controllers.line.prototype.draw.call(this, ease);
+
+    if (this.chart.tooltip._active && this.chart.tooltip._active.length) {
+      var activePoint = this.chart.tooltip._active[0],
+        ctx = this.chart.ctx,
+        x = activePoint.tooltipPosition().x,
+        topY = this.chart.legend.bottom,
+        bottomY = this.chart.chartArea.bottom;
+
+      // draw line
+      ctx.save();
+      ctx.beginPath();
+      ctx.moveTo(x, topY);
+      ctx.lineTo(x, bottomY);
+      ctx.lineWidth = 1;
+      ctx.strokeStyle = 'rgba(102, 102, 102, 0.64)';
+      ctx.stroke();
+      ctx.restore();
+    }
+  },
+});
+
+const CustomLine = generateChart('custom-line', 'LineWithLine');
 
 export default {
   name: 'LineSeries',
 
-  extends: Line,
+  extends: CustomLine,
 
   props: {
     /** Data chart label and datasets */
@@ -24,7 +52,6 @@ export default {
         {
           backgroundColor: 'rgba(255, 182, 0, 0.64)',
           borderColor: 'transparent',
-          type: 'line',
           lineTension: 0,
           order: 2,
           data: [],
@@ -98,9 +125,6 @@ export default {
           radius: 0,
         },
       },
-      hover: {
-        animationDuration: 1,
-      },
       tooltips: {
         intersect: false,
         yAlign: 'bottom',

diff --git a/src/components/Charts/MultiAxisLine/ChartMultiAxisLine.stories.js b/src/components/Charts/MultiAxisLine/ChartMultiAxisLine.stories.js
@@ -0,0 +1,203 @@
+import ChartMultiAxisLine from './ChartMultiAxisLine';
+
+export default {
+  title: 'Components/UI Elements/Charts/Multi Axis Line',
+  component: ChartMultiAxisLine,
+  argTypes: {},
+
+  parameters: {
+    componentSubtitle: '',
+  },
+};
+
+const Template = (args, { argTypes }) => ({
+  props: Object.keys(argTypes),
+  components: { ChartMultiAxisLine },
+  data() {
+    return {
+      currentData: null,
+    };
+  },
+  template:
+    '<div style="width: 900px;"><ChartMultiAxisLine v-model="currentData" v-bind="$props" /></div>',
+});
+
+export const Default = Template.bind({});
+Default.args = {
+  id: 'lineSeries',
+  chartdata: {
+    labels: [
+      '2021-05-02 08:35',
+      '2021-05-02 08:40',
+      '2021-05-02 08:45',
+      '2021-05-02 08:50',
+      '2021-05-02 08:55',
+      '2021-05-02 09:00',
+      '2021-05-02 09:05',
+      '2021-05-02 09:10',
+      '2021-05-02 09:15',
+      '2021-05-02 09:20',
+      '2021-05-02 09:25',
+      '2021-05-02 09:30',
+      '2021-05-02 09:35',
+      '2021-05-02 09:40',
+      '2021-05-02 09:45',
+      '2021-05-02 09:50',
+      '2021-05-02 09:55',
+      '2021-05-02 10:00',
+      '2021-05-02 10:05',
+      '2021-05-02 10:10',
+      '2021-05-02 10:15',
+      '2021-05-02 10:20',
+      '2021-05-02 10:25',
+      '2021-05-02 10:30',
+      '2021-05-02 10:35',
+      '2021-05-02 10:40',
+      '2021-05-02 10:45',
+      '2021-05-02 10:50',
+      '2021-05-02 10:55',
+      '2021-05-02 11:00',
+      '2021-05-02 11:05',
+      '2021-05-02 11:10',
+      '2021-05-02 11:15',
+      '2021-05-02 11:20',
+      '2021-05-02 11:25',
+      '2021-05-02 11:30',
+      '2021-05-02 11:35',
+      '2021-05-02 11:40',
+      '2021-05-02 11:45',
+      '2021-05-02 11:50',
+      '2021-05-02 11:55',
+      '2021-05-02 12:00',
+      '2021-05-02 12:05',
+      '2021-05-02 12:10',
+      '2021-05-02 12:15',
+      '2021-05-02 12:20',
+      '2021-05-02 12:25',
+      '2021-05-02 12:30',
+      '2021-05-02 12:35',
+      '2021-05-02 12:40',
+      '2021-05-02 12:45',
+      '2021-05-02 12:50',
+      '2021-05-02 12:55',
+      '2021-05-02 13:00',
+      '2021-05-02 13:05',
+      '2021-05-02 13:10',
+      '2021-05-02 13:15',
+      '2021-05-02 13:20',
+      '2021-05-02 13:25',
+      '2021-05-02 13:30',
+      '2021-05-02 13:35',
+      '2021-05-02 13:40',
+      '2021-05-02 13:45',
+      '2021-05-02 13:50',
+      '2021-05-02 13:55',
+      '2021-05-02 14:00',
+      '2021-05-02 14:05',
+      '2021-05-02 14:10',
+      '2021-05-02 14:15',
+      '2021-05-02 14:20',
+      '2021-05-02 14:25',
+      '2021-05-02 14:30',
+      '2021-05-02 14:35',
+      '2021-05-02 14:40',
+      '2021-05-02 14:45',
+      '2021-05-02 14:50',
+      '2021-05-02 14:55',
+      '2021-05-02 15:00',
+      '2021-05-02 15:05',
+      '2021-05-02 15:10',
+      '2021-05-02 15:15',
+      '2021-05-02 15:20',
+      '2021-05-02 15:25',
+      '2021-05-02 15:30',
+      '2021-05-02 15:35',
+      '2021-05-02 15:40',
+      '2021-05-02 15:45',
+      '2021-05-02 15:50',
+      '2021-05-02 15:55',
+      '2021-05-02 16:00',
+      '2021-05-02 16:05',
+      '2021-05-02 16:10',
+      '2021-05-02 16:15',
+      '2021-05-02 16:20',
+      '2021-05-02 16:25',
+      '2021-05-02 16:30',
+      '2021-05-02 16:35',
+      '2021-05-02 16:40',
+      '2021-05-02 16:45',
+      '2021-05-02 16:50',
+      '2021-05-02 16:55',
+      '2021-05-02 17:00',
+      '2021-05-02 17:05',
+      '2021-05-02 17:10',
+      '2021-05-02 17:15',
+      '2021-05-02 17:20',
+      '2021-05-02 17:25',
+      '2021-05-02 17:30',
+      '2021-05-02 17:35',
+      '2021-05-02 17:40',
+      '2021-05-02 17:45',
+      '2021-05-02 17:50',
+      '2021-05-02 17:55',
+      '2021-05-02 18:00',
+      '2021-05-02 18:05',
+      '2021-05-02 18:10',
+      '2021-05-02 18:15',
+      '2021-05-02 18:20',
+      '2021-05-02 18:25',
+      '2021-05-02 18:30',
+      '2021-05-02 18:35',
+      '2021-05-02 18:40',
+      '2021-05-02 18:45',
+      '2021-05-02 18:50',
+      '2021-05-02 18:55',
+      '2021-05-02 19:00',
+      '2021-05-02 19:05',
+    ],
+    datasets: [
+      [
+        0.06, 0.1, 0.53, 1.85, 2.53, 3.15, 3.65, 4.19, 4.59, 5.07, 5.4, 6.01,
+        6.63, 7.05, 7.49, 7.93, 8.38, 8.76, 9.14, 9.5, 9.86, 10.17, 10.47,
+        10.78, 11.39, 11.61, 11.71, 12.0, 12.37, 12.7, 12.94, 13.16, 13.44,
+        13.64, 10.12, 7.33, 13.05, 14.56, 14.83, 14.83, 14.78, 8.14, 8.05, 8.0,
+        14.99, 7.4, 7.42, 7.83, 11.04, 14.09, 7.71, 8.39, 8.51, 15.15, 16.4,
+        10.57, 15.08, 16.39, 11.16, 14.17, 16.38, 16.45, 16.08, 16.17, 16.09,
+        16.08, 8.29, 15.75, 15.81, 15.79, 15.65, 15.63, 15.66, 15.14, 9.44,
+        15.0, 14.8, 14.64, 14.46, 14.43, 14.37, 14.28, 14.12, 14.02, 13.76,
+        13.37, 13.14, 13.03, 12.82, 12.53, 12.37, 12.11, 11.85, 11.57, 11.34,
+        11.12, 10.77, 10.43, 10.13, 9.82, 9.4, 9.11, 8.74, 8.47, 8.14, 7.77,
+        7.43, 7.07, 6.69, 6.23, 5.91, 5.49, 5.12, 4.67, 4.28, 3.88, 3.47, 3.07,
+        2.7, 2.32, 1.96, 1.62, 1.34, 1.05, 0.82, 0,
+      ],
+      [
+        10.78, 11.39, 11.61, 11.71, 12.0, 12.37, 12.7, 12.94, 13.16, 13.44,
+        0.06, 0.1, 0.53, 1.85, 2.53, 3.15, 3.65, 4.19, 4.59, 5.07, 5.4, 6.01,
+        6.63, 7.05, 7.49, 7.93, 8.38, 8.76, 9.14, 9.5, 9.86, 10.17, 10.47,
+        14.99, 7.4, 7.42, 7.83, 11.04, 14.09, 7.71, 8.39, 8.51, 15.15, 16.4,
+        10.57, 15.08, 16.39, 11.16, 14.17, 16.38, 16.45, 16.08, 16.17, 16.09,
+        16.08, 8.29, 15.75, 15.81, 15.79, 15.65, 15.63, 15.66, 15.14, 9.44,
+        13.37, 13.14, 13.03, 12.82, 12.53, 12.37, 12.11, 11.85, 11.57, 11.34,
+        13.64, 10.12, 7.33, 13.05, 14.56, 14.83, 14.83, 14.78, 8.14, 8.05, 8.0,
+        15.0, 14.8, 14.64, 14.46, 14.43, 14.37, 14.28, 14.12, 14.02, 13.76, 2.7,
+        2.32, 1.96, 1.62, 1.34, 1.05, 0.82, 0, 11.12, 10.77, 10.43, 10.13, 9.82,
+        9.4, 9.11, 8.74, 8.47, 8.14, 7.77, 7.43, 7.07, 6.69, 6.23, 5.91, 5.49,
+        5.12, 4.67, 4.28, 3.88, 3.47, 3.07,
+      ],
+      [
+        13.64, 10.12, 7.33, 13.05, 14.56, 14.83, 14.83, 14.78, 8.14, 8.05, 8.0,
+        6.63, 7.05, 7.49, 7.93, 8.38, 8.76, 9.14, 9.5, 9.86, 10.17, 10.47,
+        10.78, 11.39, 11.61, 11.71, 12.0, 12.37, 12.7, 12.94, 13.16, 13.44,
+        14.99, 7.4, 7.42, 7.83, 11.04, 14.09, 7.71, 8.39, 8.51, 15.15, 16.4,
+        0.06, 0.1, 0.53, 1.85, 2.53, 3.15, 3.65, 4.19, 4.59, 5.07, 5.4, 6.01,
+        10.57, 15.08, 16.39, 11.16, 14.17, 16.38, 16.45, 16.08, 16.17, 16.09,
+        13.37, 13.14, 13.03, 12.82, 12.53, 12.37, 12.11, 11.85, 11.57, 11.34,
+        16.08, 8.29, 15.75, 15.81, 15.79, 15.65, 15.63, 15.66, 15.14, 9.44,
+        15.0, 14.8, 14.64, 14.46, 14.43, 14.37, 14.28, 14.12, 14.02, 13.76, 2.7,
+        2.32, 1.96, 1.62, 1.34, 1.05, 0.82, 0, 11.12, 10.77, 10.43, 10.13, 9.82,
+        9.4, 9.11, 8.74, 8.47, 8.14, 7.77, 7.43, 7.07, 6.69, 6.23, 5.91, 5.49,
+        5.12, 4.67, 4.28, 3.88, 3.47, 3.07,
+      ],
+    ],
+  },
+};
diff --git a/src/components/Charts/MultiAxisLine/ChartMultiAxisLine.vue b/src/components/Charts/MultiAxisLine/ChartMultiAxisLine.vue
@@ -0,0 +1,66 @@
+<template>
+  <div :id="id" ref="line" class="multi-axis-line">
+    <MultiAxisLine v-model="data" :data-chart="chartdata" />
+
+    <div class="flex justify-end">
+      <span class="print" @click="print">Salvar imagem</span>
+    </div>
+  </div>
+</template>
+
+<script>
+import MultiAxisLine from './MultiAxisLine';
+import html2canvas from 'html2canvas';
+
+export default {
+  name: 'ChartMultiAxisLine',
+
+  components: {
+    MultiAxisLine,
+  },
+
+  props: {
+    /** Specify a custom id */
+    id: {
+      type: String,
+      required: true,
+    },
+
+    /** Data chart label and datasets */
+    chartdata: {
+      required: true,
+      type: Object,
+      validator: function (obj) {
+        return 'labels' in obj && 'datasets' in obj;
+      },
+    },
+  },
+
+  data() {
+    return {
+      data: null,
+    };
+  },
+
+  watch: {
+    data: function (val) {
+      this.$emit('input', val);
+    },
+  },
+
+  methods: {
+    print() {
+      html2canvas(this.$refs.line).then(function (canvas) {
+        const link = document.createElement('a');
+        link.href = canvas.toDataURL('image/jpeg');
+        link.download = 'producao-dia.jpeg';
+        link.click();
+      });
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+@import '@scss/_chart_multi-axis-line';
+</style>