From e111a335eea5784317ea029b10b0f6809ffbcf0a Mon Sep 17 00:00:00 2001
From: Fernando Jesus <fernando.rodrigodejesus@gmail.com>
Date: Mon, 28 Jun 2021 11:32:39 -0300
Subject: [PATCH 1/5] feat: config init

---
 src/assets/scss/_multi-axis-line.scss         |   3 +
 .../ChartMultiAxisLine.stories.js             | 180 ++++++++++++++
 .../MultiAxisLine/ChartMultiAxisLine.vue      |  61 +++++
 .../Charts/MultiAxisLine/MultiAxisLine.vue    | 221 ++++++++++++++++++
 4 files changed, 465 insertions(+)
 create mode 100644 src/assets/scss/_multi-axis-line.scss
 create mode 100644 src/components/Charts/MultiAxisLine/ChartMultiAxisLine.stories.js
 create mode 100644 src/components/Charts/MultiAxisLine/ChartMultiAxisLine.vue
 create mode 100644 src/components/Charts/MultiAxisLine/MultiAxisLine.vue

diff --git a/src/assets/scss/_multi-axis-line.scss b/src/assets/scss/_multi-axis-line.scss
new file mode 100644
index 00000000..dc7f9c4b
--- /dev/null
+++ b/src/assets/scss/_multi-axis-line.scss
@@ -0,0 +1,3 @@
+.multiaxisline {
+
+}
diff --git a/src/components/Charts/MultiAxisLine/ChartMultiAxisLine.stories.js b/src/components/Charts/MultiAxisLine/ChartMultiAxisLine.stories.js
new file mode 100644
index 00000000..b1892faf
--- /dev/null
+++ b/src/components/Charts/MultiAxisLine/ChartMultiAxisLine.stories.js
@@ -0,0 +1,180 @@
+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 },
+  template:
+    '<div style="width: 1000px;"><ChartMultiAxisLine v-bind="$props" /></div>',
+});
+
+export const Default = Template.bind({});
+Default.args = {
+  id: 'lineSeries',
+  chartdata: {
+    labels: [
+      '2021-05-02 08:35:00',
+      '2021-05-02 08:40:00',
+      '2021-05-02 08:45:00',
+      '2021-05-02 08:50:00',
+      '2021-05-02 08:55:00',
+      '2021-05-02 09:00:00',
+      '2021-05-02 09:05:00',
+      '2021-05-02 09:10:00',
+      '2021-05-02 09:15:00',
+      '2021-05-02 09:20:00',
+      '2021-05-02 09:25:00',
+      '2021-05-02 09:30:00',
+      '2021-05-02 09:35:00',
+      '2021-05-02 09:40:00',
+      '2021-05-02 09:45:00',
+      '2021-05-02 09:50:00',
+      '2021-05-02 09:55:00',
+      '2021-05-02 10:00:00',
+      '2021-05-02 10:05:00',
+      '2021-05-02 10:10:00',
+      '2021-05-02 10:15:00',
+      '2021-05-02 10:20:00',
+      '2021-05-02 10:25:00',
+      '2021-05-02 10:30:00',
+      '2021-05-02 10:35:00',
+      '2021-05-02 10:40:00',
+      '2021-05-02 10:45:00',
+      '2021-05-02 10:50:00',
+      '2021-05-02 10:55:00',
+      '2021-05-02 11:00:00',
+      '2021-05-02 11:05:00',
+      '2021-05-02 11:10:00',
+      '2021-05-02 11:15:00',
+      '2021-05-02 11:20:00',
+      '2021-05-02 11:25:00',
+      '2021-05-02 11:30:00',
+      '2021-05-02 11:35:00',
+      '2021-05-02 11:40:00',
+      '2021-05-02 11:45:00',
+      '2021-05-02 11:50:00',
+      '2021-05-02 11:55:00',
+      '2021-05-02 12:00:00',
+      '2021-05-02 12:05:00',
+      '2021-05-02 12:10:00',
+      '2021-05-02 12:15:00',
+      '2021-05-02 12:20:00',
+      '2021-05-02 12:25:00',
+      '2021-05-02 12:30:00',
+      '2021-05-02 12:35:00',
+      '2021-05-02 12:40:00',
+      '2021-05-02 12:45:00',
+      '2021-05-02 12:50:00',
+      '2021-05-02 12:55:00',
+      '2021-05-02 13:00:00',
+      '2021-05-02 13:05:00',
+      '2021-05-02 13:10:00',
+      '2021-05-02 13:15:00',
+      '2021-05-02 13:20:00',
+      '2021-05-02 13:25:00',
+      '2021-05-02 13:30:00',
+      '2021-05-02 13:35:00',
+      '2021-05-02 13:40:00',
+      '2021-05-02 13:45:00',
+      '2021-05-02 13:50:00',
+      '2021-05-02 13:55:00',
+      '2021-05-02 14:00:00',
+      '2021-05-02 14:05:00',
+      '2021-05-02 14:10:00',
+      '2021-05-02 14:15:00',
+      '2021-05-02 14:20:00',
+      '2021-05-02 14:25:00',
+      '2021-05-02 14:30:00',
+      '2021-05-02 14:35:00',
+      '2021-05-02 14:40:00',
+      '2021-05-02 14:45:00',
+      '2021-05-02 14:50:00',
+      '2021-05-02 14:55:00',
+      '2021-05-02 15:00:00',
+      '2021-05-02 15:05:00',
+      '2021-05-02 15:10:00',
+      '2021-05-02 15:15:00',
+      '2021-05-02 15:20:00',
+      '2021-05-02 15:25:00',
+      '2021-05-02 15:30:00',
+      '2021-05-02 15:35:00',
+      '2021-05-02 15:40:00',
+      '2021-05-02 15:45:00',
+      '2021-05-02 15:50:00',
+      '2021-05-02 15:55:00',
+      '2021-05-02 16:00:00',
+      '2021-05-02 16:05:00',
+      '2021-05-02 16:10:00',
+      '2021-05-02 16:15:00',
+      '2021-05-02 16:20:00',
+      '2021-05-02 16:25:00',
+      '2021-05-02 16:30:00',
+      '2021-05-02 16:35:00',
+      '2021-05-02 16:40:00',
+      '2021-05-02 16:45:00',
+      '2021-05-02 16:50:00',
+      '2021-05-02 16:55:00',
+      '2021-05-02 17:00:00',
+      '2021-05-02 17:05:00',
+      '2021-05-02 17:10:00',
+      '2021-05-02 17:15:00',
+      '2021-05-02 17:20:00',
+      '2021-05-02 17:25:00',
+      '2021-05-02 17:30:00',
+      '2021-05-02 17:35:00',
+      '2021-05-02 17:40:00',
+      '2021-05-02 17:45:00',
+      '2021-05-02 17:50:00',
+      '2021-05-02 17:55:00',
+      '2021-05-02 18:00:00',
+      '2021-05-02 18:05:00',
+      '2021-05-02 18:10:00',
+      '2021-05-02 18:15:00',
+      '2021-05-02 18:20:00',
+      '2021-05-02 18:25:00',
+      '2021-05-02 18:30:00',
+      '2021-05-02 18:35:00',
+      '2021-05-02 18:40:00',
+      '2021-05-02 18:45:00',
+      '2021-05-02 18:50:00',
+      '2021-05-02 18:55:00',
+      '2021-05-02 19:00:00',
+      '2021-05-02 19:05:00',
+      '2021-05-02 19:10:00',
+      '2021-05-02 19:15:00',
+      '2021-05-02 19:20:00',
+      '2021-05-02 19:25:00',
+      '2021-05-02 19:30:00',
+      '2021-05-02 19:35:00',
+      '2021-05-02 19:40:00',
+    ],
+    datasets: [
+      1.58, 0, 32.17, 130.41, 152.04, 219.25, 315.12, 355.18, 340.2, 384.2,
+      440.88, 570.94, 666.36, 728.67, 830.4, 910.6, 1053.48, 1238.45, 1434.0,
+      1603.63, 1641.0, 2050.56, 1976.66, 2030.88, 2115.69, 2220.6, 2372.27,
+      2477.52, 2546.01, 3023.88, 2469.67, 3296.04, 2617.04, 2585.28, 1763.4,
+      3900.0, 4298.69, 4201.99, 5008.92, 5083.34, 5471.16, 3449.02, 3016.56,
+      4365.27, 5618.64, 3973.61, 6084.24, 6173.22, 4879.32, 5627.32, 6508.92,
+      6198.5, 5076.6, 4448.35, 4306.17, 6917.16, 6582.7, 5364.24, 4537.69,
+      7593.6, 7423.71, 5655.12, 7373.86, 7680.72, 7092.6, 7877.52, 3505.61,
+      8016.12, 7103.68, 6443.76, 7365.48, 7766.73, 7965.84, 7419.61, 6157.08,
+      6525.51, 5015.76, 2655.09, 3865.92, 7358.93, 7781.88, 8215.83, 7939.32,
+      7405.77, 7129.91, 7610.16, 6672.52, 7426.92, 7000.74, 3681.24, 7058.05,
+      4632.48, 7234.43, 7169.76, 7083.45, 7164.84, 7009.53, 6734.76, 6835.06,
+      5748.44, 6464.28, 7041.79, 2805.12, 2283.17, 3211.68, 5297.78, 5661.84,
+      6750.06, 6218.52, 5852.59, 3534.44, 1330.32, 725.66, 609.6, 742.88,
+      1111.32, 1465.16, 1599.72, 1672.62, 1637.88, 1456.62, 964.32, 515.92,
+      378.72, 202.76, 62.23, 80.52, 88.62, 96.84, 96.92, 75.36, 61.53, 56.28,
+      19.81,
+    ],
+  },
+};
diff --git a/src/components/Charts/MultiAxisLine/ChartMultiAxisLine.vue b/src/components/Charts/MultiAxisLine/ChartMultiAxisLine.vue
new file mode 100644
index 00000000..41adedd3
--- /dev/null
+++ b/src/components/Charts/MultiAxisLine/ChartMultiAxisLine.vue
@@ -0,0 +1,61 @@
+<template>
+  <div :id="id" ref="line" class="chart-line-series">
+    <MultiAxisLine :data-chart="chartdata" />
+
+    <div class="flex justify-between">
+      <ul class="legend">
+        <li class="online">Online</li>
+        <li class="offline">Offine</li>
+        <li class="disconnected">Desconectado na rede</li>
+        <li class="production">Produção estimada</li>
+      </ul>
+
+      <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;
+      },
+    },
+  },
+
+  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/_multi-axis-line';
+</style>
diff --git a/src/components/Charts/MultiAxisLine/MultiAxisLine.vue b/src/components/Charts/MultiAxisLine/MultiAxisLine.vue
new file mode 100644
index 00000000..c29b919e
--- /dev/null
+++ b/src/components/Charts/MultiAxisLine/MultiAxisLine.vue
@@ -0,0 +1,221 @@
+<script>
+import { Line } from 'vue-chartjs';
+
+export default {
+  name: 'MultiAxisLine',
+
+  extends: Line,
+
+  props: {
+    /** Data chart label and datasets */
+    dataChart: {
+      required: true,
+      type: Object,
+      validator: function (obj) {
+        return 'labels' in obj && 'datasets' in obj;
+      },
+    },
+  },
+
+  data: () => ({
+    chartdata: {
+      labels: [],
+      datasets: [
+        {
+          backgroundColor: 'rgba(255, 182, 0, 0.64)',
+          borderColor: 'transparent',
+          type: 'line',
+          lineTension: 0,
+          order: 2,
+          data: [],
+        },
+      ],
+    },
+
+    options: {
+      responsive: true,
+      legend: {
+        display: false,
+      },
+      layout: {
+        padding: {
+          bottom: 28,
+          top: 24,
+        },
+      },
+      maintainAspectRatio: false,
+      scales: {
+        xAxes: [
+          {
+            type: 'time',
+            time: {
+              min: new Date('2021-05-02 01:00:00'),
+              max: new Date('2021-05-02 23:00:00'),
+              unit: 'hour',
+              unitStepSize: 2,
+              displayFormats: { hour: 'H:mm' },
+            },
+            gridLines: {
+              display: false,
+              gridLines: true,
+              offsetGridLines: true,
+            },
+            ticks: {
+              display: true,
+              beginAtZero: false,
+              fontColor: '#666',
+              fontSize: '12',
+              fontFamily: 'Lato, sans-serif',
+            },
+          },
+        ],
+        yAxes: [
+          {
+            afterFit: function (scale) {
+              scale.width = 80;
+            },
+            scaleLabel: {
+              display: true,
+              labelString: 'WATTS',
+              fontFamily: 'Lato, sans-serif',
+              fontSize: '10',
+              fontColor: '#999',
+            },
+            ticks: {
+              fontColor: '#666',
+              fontSize: '12',
+              fontFamily: 'Lato, sans-serif',
+              padding: 12,
+            },
+            gridLines: {
+              drawBorder: false,
+            },
+          },
+        ],
+      },
+      elements: {
+        point: {
+          radius: 0,
+        },
+      },
+      hover: {
+        animationDuration: 1,
+      },
+      tooltips: {
+        intersect: false,
+        yAlign: 'bottom',
+        xAlign: 'center',
+        borderWidth: 1,
+        borderColor: '#E0E0E0',
+        backgroundColor: 'rgba(255, 255, 255, 1)',
+        bodyAlign: 'center',
+        bodyFontColor: '#666',
+        bodyFontSize: 14,
+        bodyFontStyle: '600',
+        bodyFontFamily: 'Lato, sans-serif',
+        displayColors: false,
+        titleFontSize: 10,
+        titleAlign: 'center',
+        titleFontColor: '#666',
+        titleFontFamily: 'Lato, sans-serif',
+        titleFontStyle: '400',
+        footerFontSize: 10,
+        footerFontColor: '#30B4FF',
+        footerFontFamily: 'Lato, sans-serif',
+        footerFontStyle: '600',
+        footerTextAlign: 'center',
+        yPadding: 8,
+        xPadding: 16,
+        custom: function (tooltip) {
+          if (!tooltip) return;
+          tooltip.displayColors = false;
+        },
+        callbacks: {
+          title: function (tooltipItem, data) {
+            const newDate = new Date(data.labels[tooltipItem[0]['index']]);
+
+            const pad = (num) => {
+              let s = String(num);
+
+              if (s.length < 2) {
+                s = '0' + s;
+              }
+              return s;
+            };
+
+            return `${newDate.getHours()}:${pad(newDate.getMinutes())}`;
+          },
+          label: function (tooltipItem, data) {
+            return `${data.datasets[0].data[tooltipItem['index']]} W`;
+          },
+        },
+      },
+    },
+  }),
+
+  watch: {
+    series: function () {
+      this.setData();
+      this.renderChart(this.chartdata, this.options);
+    },
+  },
+
+  beforeMount() {
+    this.setData();
+  },
+
+  mounted() {
+    this.addPlugin({
+      afterDraw: (chart) => {
+        const ctx = chart.chart.ctx;
+        const xAxis = chart.scales['x-axis-0'];
+        const yAxis = chart.scales['y-axis-0'];
+        ctx.save();
+        ctx.textAlign = 'center';
+        ctx.font = '22px Lato, sans-serif';
+
+        for (let i = 1; i < 24; i = i + 2) {
+          const oldHours = `${chart.data.labels[0].split(' ')[0]} ${this.pad(
+            i,
+          )}:00:00`;
+          const x = xAxis.getPixelForValue(oldHours);
+
+          ctx.fillStyle = '#FFB600';
+
+          chart.data.labels.map((item) => {
+            const hour = item.split(' ')[1];
+
+            if (hour === `${this.pad(i)}:00:00`) {
+              ctx.fillStyle = '#4CD89D';
+              if (chart.data.datasets[0].data[i] === 0) {
+                ctx.fillStyle = '#FF7771';
+              }
+            }
+          });
+
+          ctx.fillText('•', x, yAxis.bottom + 36);
+        }
+
+        ctx.restore();
+      },
+    });
+    this.renderChart(this.chartdata, this.options);
+  },
+
+  methods: {
+    setData() {
+      this.chartdata.labels = this.dataChart.labels;
+      this.chartdata.datasets[0].data = this.dataChart.datasets;
+    },
+
+    pad(num) {
+      let s = String(num);
+
+      if (s.length < 2) {
+        s = '0' + s;
+      }
+      return s;
+    },
+  },
+};
+</script>

From 3477d25a425208d89deeaf44b253c22e42d42837 Mon Sep 17 00:00:00 2001
From: Fernando Jesus <fernando.rodrigodejesus@gmail.com>
Date: Mon, 28 Jun 2021 22:00:53 -0300
Subject: [PATCH 2/5] feat: style chart

---
 src/assets/scss/_chart_multi-axis-line.scss   |  11 ++
 src/assets/scss/_multi-axis-line.scss         |   3 -
 src/components/Charts/Bar/Bar.vue             |   3 -
 src/components/Charts/Bar/ChartBar.stories.js |   2 +-
 .../LineSeries/ChartLineSeries.stories.js     |   2 +-
 .../Charts/LineSeries/LineSeries.vue          |  39 ++++-
 .../ChartMultiAxisLine.stories.js             |  56 ++++---
 .../MultiAxisLine/ChartMultiAxisLine.vue      |  13 +-
 .../Charts/MultiAxisLine/MultiAxisLine.vue    | 157 +++++++++---------
 src/index.js                                  |   4 +-
 10 files changed, 160 insertions(+), 130 deletions(-)
 create mode 100644 src/assets/scss/_chart_multi-axis-line.scss
 delete mode 100644 src/assets/scss/_multi-axis-line.scss

diff --git a/src/assets/scss/_chart_multi-axis-line.scss b/src/assets/scss/_chart_multi-axis-line.scss
new file mode 100644
index 00000000..29f0b8c4
--- /dev/null
+++ 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/assets/scss/_multi-axis-line.scss b/src/assets/scss/_multi-axis-line.scss
deleted file mode 100644
index dc7f9c4b..00000000
--- a/src/assets/scss/_multi-axis-line.scss
+++ /dev/null
@@ -1,3 +0,0 @@
-.multiaxisline {
-
-}
diff --git a/src/components/Charts/Bar/Bar.vue b/src/components/Charts/Bar/Bar.vue
index 9147f6d2..bd968d1c 100644
--- 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
index e5aae72f..6d2a1e52 100644
--- 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
index 200eb100..beb5f3e5 100644
--- 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
index 9bbb248a..7b0ac071 100644
--- 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,9 @@ export default {
           radius: 0,
         },
       },
-      hover: {
-        animationDuration: 1,
-      },
+      // 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
index b1892faf..63e7e5d9 100644
--- a/src/components/Charts/MultiAxisLine/ChartMultiAxisLine.stories.js
+++ b/src/components/Charts/MultiAxisLine/ChartMultiAxisLine.stories.js
@@ -14,7 +14,7 @@ const Template = (args, { argTypes }) => ({
   props: Object.keys(argTypes),
   components: { ChartMultiAxisLine },
   template:
-    '<div style="width: 1000px;"><ChartMultiAxisLine v-bind="$props" /></div>',
+    '<div style="width: 900px;"><ChartMultiAxisLine v-bind="$props" /></div>',
 });
 
 export const Default = Template.bind({});
@@ -149,32 +149,38 @@ Default.args = {
       '2021-05-02 18:55:00',
       '2021-05-02 19:00:00',
       '2021-05-02 19:05:00',
-      '2021-05-02 19:10:00',
-      '2021-05-02 19:15:00',
-      '2021-05-02 19:20:00',
-      '2021-05-02 19:25:00',
-      '2021-05-02 19:30:00',
-      '2021-05-02 19:35:00',
-      '2021-05-02 19:40:00',
     ],
     datasets: [
-      1.58, 0, 32.17, 130.41, 152.04, 219.25, 315.12, 355.18, 340.2, 384.2,
-      440.88, 570.94, 666.36, 728.67, 830.4, 910.6, 1053.48, 1238.45, 1434.0,
-      1603.63, 1641.0, 2050.56, 1976.66, 2030.88, 2115.69, 2220.6, 2372.27,
-      2477.52, 2546.01, 3023.88, 2469.67, 3296.04, 2617.04, 2585.28, 1763.4,
-      3900.0, 4298.69, 4201.99, 5008.92, 5083.34, 5471.16, 3449.02, 3016.56,
-      4365.27, 5618.64, 3973.61, 6084.24, 6173.22, 4879.32, 5627.32, 6508.92,
-      6198.5, 5076.6, 4448.35, 4306.17, 6917.16, 6582.7, 5364.24, 4537.69,
-      7593.6, 7423.71, 5655.12, 7373.86, 7680.72, 7092.6, 7877.52, 3505.61,
-      8016.12, 7103.68, 6443.76, 7365.48, 7766.73, 7965.84, 7419.61, 6157.08,
-      6525.51, 5015.76, 2655.09, 3865.92, 7358.93, 7781.88, 8215.83, 7939.32,
-      7405.77, 7129.91, 7610.16, 6672.52, 7426.92, 7000.74, 3681.24, 7058.05,
-      4632.48, 7234.43, 7169.76, 7083.45, 7164.84, 7009.53, 6734.76, 6835.06,
-      5748.44, 6464.28, 7041.79, 2805.12, 2283.17, 3211.68, 5297.78, 5661.84,
-      6750.06, 6218.52, 5852.59, 3534.44, 1330.32, 725.66, 609.6, 742.88,
-      1111.32, 1465.16, 1599.72, 1672.62, 1637.88, 1456.62, 964.32, 515.92,
-      378.72, 202.76, 62.23, 80.52, 88.62, 96.84, 96.92, 75.36, 61.53, 56.28,
-      19.81,
+      [
+        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,
+      ],
+      [
+        6.0, 65.0, 227.0, 305.0, 375.0, 445.0, 513.0, 576.0, 629.0, 676.0,
+        730.0, 786.0, 839.0, 893.0, 943.0, 994.0, 1041.0, 1088.0, 1131.0,
+        1173.0, 1211.0, 1252.0, 1294.0, 1336.0, 1371.0, 1409.0, 1449.0, 1489.0,
+        1524.0, 1558.0, 1584.0, 1618.0, 1645.0, 807.0, 577.0, 1566.0, 1736.0,
+        1763.0, 1778.0, 1787.0, 644.0, 634.0, 627.0, 1289.0, 533.0, 575.0,
+        618.0, 1313.0, 1128.0, 602.0, 994.0, 656.0, 1799.0, 1957.0, 829.0,
+        1759.0, 1977.0, 882.0, 1683.0, 1964.0, 1960.0, 1940.0, 1941.0, 1944.0,
+        1931.0, 651.0, 1888.0, 1893.0, 1877.0, 1859.0, 1847.0, 1839.0, 1531.0,
+        920.0, 1794.0, 1772.0, 1750.0, 1723.0, 1722.0, 1709.0, 1700.0, 1677.0,
+        1646.0, 1618.0, 1595.0, 1573.0, 1551.0, 1524.0, 1491.0, 1466.0, 1434.0,
+        1399.0, 1367.0, 1334.0, 1306.0, 1264.0, 1225.0, 1186.0, 1145.0, 1097.0,
+        1056.0, 1013.0, 981.0, 937.0, 896.0, 852.0, 807.0, 762.0, 714.0, 672.0,
+        623.0, 576.0, 529.0, 483.0, 436.0, 392.0, 346.0, 303.0, 260.0, 221.0,
+        183.0, 149.0, 116.0, 91.0, 67.0, 0,
+      ],
     ],
   },
 };
diff --git a/src/components/Charts/MultiAxisLine/ChartMultiAxisLine.vue b/src/components/Charts/MultiAxisLine/ChartMultiAxisLine.vue
index 41adedd3..76cd3b98 100644
--- a/src/components/Charts/MultiAxisLine/ChartMultiAxisLine.vue
+++ b/src/components/Charts/MultiAxisLine/ChartMultiAxisLine.vue
@@ -1,15 +1,8 @@
 <template>
-  <div :id="id" ref="line" class="chart-line-series">
+  <div :id="id" ref="line" class="multi-axis-line">
     <MultiAxisLine :data-chart="chartdata" />
 
-    <div class="flex justify-between">
-      <ul class="legend">
-        <li class="online">Online</li>
-        <li class="offline">Offine</li>
-        <li class="disconnected">Desconectado na rede</li>
-        <li class="production">Produção estimada</li>
-      </ul>
-
+    <div class="flex justify-end">
       <span class="print" @click="print">Salvar imagem</span>
     </div>
   </div>
@@ -57,5 +50,5 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-@import '@scss/_multi-axis-line';
+@import '@scss/_chart_multi-axis-line';
 </style>
diff --git a/src/components/Charts/MultiAxisLine/MultiAxisLine.vue b/src/components/Charts/MultiAxisLine/MultiAxisLine.vue
index c29b919e..d0c38b5e 100644
--- a/src/components/Charts/MultiAxisLine/MultiAxisLine.vue
+++ b/src/components/Charts/MultiAxisLine/MultiAxisLine.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: 'MultiAxisLine',
 
-  extends: Line,
+  extends: CustomLine,
 
   props: {
     /** Data chart label and datasets */
@@ -22,12 +50,20 @@ export default {
       labels: [],
       datasets: [
         {
-          backgroundColor: 'rgba(255, 182, 0, 0.64)',
-          borderColor: 'transparent',
-          type: 'line',
+          backgroundColor: 'transparent',
+          borderColor: '#4CD89D',
+          lineTension: 0,
+          order: 1,
+          data: [],
+          yAxisID: 'A',
+        },
+        {
+          backgroundColor: 'transparent',
+          borderColor: '#7DD0FF',
           lineTension: 0,
           order: 2,
           data: [],
+          yAxisID: 'B',
         },
       ],
     },
@@ -49,8 +85,6 @@ export default {
           {
             type: 'time',
             time: {
-              min: new Date('2021-05-02 01:00:00'),
-              max: new Date('2021-05-02 23:00:00'),
               unit: 'hour',
               unitStepSize: 2,
               displayFormats: { hour: 'H:mm' },
@@ -61,6 +95,8 @@ export default {
               offsetGridLines: true,
             },
             ticks: {
+              min: new Date('2021-05-02 01:00:00'),
+              max: new Date('2021-05-02 21:00:00'),
               display: true,
               beginAtZero: false,
               fontColor: '#666',
@@ -76,7 +112,30 @@ export default {
             },
             scaleLabel: {
               display: true,
-              labelString: 'WATTS',
+              labelString: 'Tensão (V)',
+              fontFamily: 'Lato, sans-serif',
+              fontSize: '10',
+              fontColor: '#999',
+            },
+            ticks: {
+              fontColor: '#666',
+              fontSize: '12',
+              fontFamily: 'Lato, sans-serif',
+              padding: 12,
+            },
+            gridLines: {
+              drawBorder: false,
+            },
+            id: 'A',
+          },
+          {
+            position: 'right',
+            afterFit: function (scale) {
+              scale.width = 80;
+            },
+            scaleLabel: {
+              display: true,
+              labelString: 'Tensão (V)',
               fontFamily: 'Lato, sans-serif',
               fontSize: '10',
               fontColor: '#999',
@@ -87,9 +146,12 @@ export default {
               fontFamily: 'Lato, sans-serif',
               padding: 12,
             },
+
             gridLines: {
+              display: false,
               drawBorder: false,
             },
+            id: 'B',
           },
         ],
       },
@@ -103,49 +165,17 @@ export default {
       },
       tooltips: {
         intersect: false,
-        yAlign: 'bottom',
-        xAlign: 'center',
-        borderWidth: 1,
-        borderColor: '#E0E0E0',
-        backgroundColor: 'rgba(255, 255, 255, 1)',
-        bodyAlign: 'center',
-        bodyFontColor: '#666',
-        bodyFontSize: 14,
-        bodyFontStyle: '600',
-        bodyFontFamily: 'Lato, sans-serif',
-        displayColors: false,
-        titleFontSize: 10,
-        titleAlign: 'center',
-        titleFontColor: '#666',
-        titleFontFamily: 'Lato, sans-serif',
-        titleFontStyle: '400',
-        footerFontSize: 10,
-        footerFontColor: '#30B4FF',
-        footerFontFamily: 'Lato, sans-serif',
-        footerFontStyle: '600',
-        footerTextAlign: 'center',
-        yPadding: 8,
-        xPadding: 16,
         custom: function (tooltip) {
           if (!tooltip) return;
           tooltip.displayColors = false;
+          tooltip.opacity = 0;
         },
         callbacks: {
-          title: function (tooltipItem, data) {
-            const newDate = new Date(data.labels[tooltipItem[0]['index']]);
-
-            const pad = (num) => {
-              let s = String(num);
-
-              if (s.length < 2) {
-                s = '0' + s;
-              }
-              return s;
-            };
-
-            return `${newDate.getHours()}:${pad(newDate.getMinutes())}`;
+          title: (tooltipItem, data) => {
+            console.log(this, tooltipItem, data);
           },
-          label: function (tooltipItem, data) {
+          label: (tooltipItem, data) => {
+            console.log(this);
             return `${data.datasets[0].data[tooltipItem['index']]} W`;
           },
         },
@@ -165,47 +195,14 @@ export default {
   },
 
   mounted() {
-    this.addPlugin({
-      afterDraw: (chart) => {
-        const ctx = chart.chart.ctx;
-        const xAxis = chart.scales['x-axis-0'];
-        const yAxis = chart.scales['y-axis-0'];
-        ctx.save();
-        ctx.textAlign = 'center';
-        ctx.font = '22px Lato, sans-serif';
-
-        for (let i = 1; i < 24; i = i + 2) {
-          const oldHours = `${chart.data.labels[0].split(' ')[0]} ${this.pad(
-            i,
-          )}:00:00`;
-          const x = xAxis.getPixelForValue(oldHours);
-
-          ctx.fillStyle = '#FFB600';
-
-          chart.data.labels.map((item) => {
-            const hour = item.split(' ')[1];
-
-            if (hour === `${this.pad(i)}:00:00`) {
-              ctx.fillStyle = '#4CD89D';
-              if (chart.data.datasets[0].data[i] === 0) {
-                ctx.fillStyle = '#FF7771';
-              }
-            }
-          });
-
-          ctx.fillText('•', x, yAxis.bottom + 36);
-        }
-
-        ctx.restore();
-      },
-    });
     this.renderChart(this.chartdata, this.options);
   },
 
   methods: {
     setData() {
       this.chartdata.labels = this.dataChart.labels;
-      this.chartdata.datasets[0].data = this.dataChart.datasets;
+      this.chartdata.datasets[0].data = this.dataChart.datasets[0];
+      this.chartdata.datasets[1].data = this.dataChart.datasets[1];
     },
 
     pad(num) {
diff --git a/src/index.js b/src/index.js
index 134ee734..348daaba 100644
--- a/src/index.js
+++ b/src/index.js
@@ -14,7 +14,9 @@ export { default as List } from '@components/List/List';
 export { default as Modal } from '@components/Modal/Modal';
 export { default as SelectInput } from '@components/SelectInput/SelectInput';
 export { default as Toaster } from '@components/Toaster';
-export { default as ChartCircle } from '@components/Charts/Circle/ChartCircle';
 export { default as PageSize } from '@components/PageSize/PageSize';
 export { default as TagsFilter } from '@components/TagsFilter/TagsFilter';
 export { default as ChartBar } from '@components/Charts/Bar/ChartBar';
+export { default as ChartCircle } from '@components/Charts/Circle/ChartCircle';
+export { default as ChartLineSeries } from '@components/Charts/LineSeries/ChartLineSeries';
+export { default as ChartMultiAxisLine } from '@components/Charts/MultiAxisLine/ChartMultiAxisLine';

From 7910598764683938fd70d45b036361d9042eb955 Mon Sep 17 00:00:00 2001
From: Fernando Jesus <fernando.rodrigodejesus@gmail.com>
Date: Tue, 29 Jun 2021 13:53:10 -0300
Subject: [PATCH 3/5] feat: config v-model

---
 .../ChartMultiAxisLine.stories.js             | 301 +++++++++---------
 .../MultiAxisLine/ChartMultiAxisLine.vue      |  14 +-
 .../Charts/MultiAxisLine/MultiAxisLine.vue    |  94 +++---
 3 files changed, 210 insertions(+), 199 deletions(-)

diff --git a/src/components/Charts/MultiAxisLine/ChartMultiAxisLine.stories.js b/src/components/Charts/MultiAxisLine/ChartMultiAxisLine.stories.js
index 63e7e5d9..a4a0be53 100644
--- a/src/components/Charts/MultiAxisLine/ChartMultiAxisLine.stories.js
+++ b/src/components/Charts/MultiAxisLine/ChartMultiAxisLine.stories.js
@@ -13,8 +13,13 @@ export default {
 const Template = (args, { argTypes }) => ({
   props: Object.keys(argTypes),
   components: { ChartMultiAxisLine },
+  data() {
+    return {
+      currentData: null,
+    };
+  },
   template:
-    '<div style="width: 900px;"><ChartMultiAxisLine v-bind="$props" /></div>',
+    '<div style="width: 900px;"><ChartMultiAxisLine v-model="currentData" v-bind="$props" /></div>',
 });
 
 export const Default = Template.bind({});
@@ -22,133 +27,133 @@ Default.args = {
   id: 'lineSeries',
   chartdata: {
     labels: [
-      '2021-05-02 08:35:00',
-      '2021-05-02 08:40:00',
-      '2021-05-02 08:45:00',
-      '2021-05-02 08:50:00',
-      '2021-05-02 08:55:00',
-      '2021-05-02 09:00:00',
-      '2021-05-02 09:05:00',
-      '2021-05-02 09:10:00',
-      '2021-05-02 09:15:00',
-      '2021-05-02 09:20:00',
-      '2021-05-02 09:25:00',
-      '2021-05-02 09:30:00',
-      '2021-05-02 09:35:00',
-      '2021-05-02 09:40:00',
-      '2021-05-02 09:45:00',
-      '2021-05-02 09:50:00',
-      '2021-05-02 09:55:00',
-      '2021-05-02 10:00:00',
-      '2021-05-02 10:05:00',
-      '2021-05-02 10:10:00',
-      '2021-05-02 10:15:00',
-      '2021-05-02 10:20:00',
-      '2021-05-02 10:25:00',
-      '2021-05-02 10:30:00',
-      '2021-05-02 10:35:00',
-      '2021-05-02 10:40:00',
-      '2021-05-02 10:45:00',
-      '2021-05-02 10:50:00',
-      '2021-05-02 10:55:00',
-      '2021-05-02 11:00:00',
-      '2021-05-02 11:05:00',
-      '2021-05-02 11:10:00',
-      '2021-05-02 11:15:00',
-      '2021-05-02 11:20:00',
-      '2021-05-02 11:25:00',
-      '2021-05-02 11:30:00',
-      '2021-05-02 11:35:00',
-      '2021-05-02 11:40:00',
-      '2021-05-02 11:45:00',
-      '2021-05-02 11:50:00',
-      '2021-05-02 11:55:00',
-      '2021-05-02 12:00:00',
-      '2021-05-02 12:05:00',
-      '2021-05-02 12:10:00',
-      '2021-05-02 12:15:00',
-      '2021-05-02 12:20:00',
-      '2021-05-02 12:25:00',
-      '2021-05-02 12:30:00',
-      '2021-05-02 12:35:00',
-      '2021-05-02 12:40:00',
-      '2021-05-02 12:45:00',
-      '2021-05-02 12:50:00',
-      '2021-05-02 12:55:00',
-      '2021-05-02 13:00:00',
-      '2021-05-02 13:05:00',
-      '2021-05-02 13:10:00',
-      '2021-05-02 13:15:00',
-      '2021-05-02 13:20:00',
-      '2021-05-02 13:25:00',
-      '2021-05-02 13:30:00',
-      '2021-05-02 13:35:00',
-      '2021-05-02 13:40:00',
-      '2021-05-02 13:45:00',
-      '2021-05-02 13:50:00',
-      '2021-05-02 13:55:00',
-      '2021-05-02 14:00:00',
-      '2021-05-02 14:05:00',
-      '2021-05-02 14:10:00',
-      '2021-05-02 14:15:00',
-      '2021-05-02 14:20:00',
-      '2021-05-02 14:25:00',
-      '2021-05-02 14:30:00',
-      '2021-05-02 14:35:00',
-      '2021-05-02 14:40:00',
-      '2021-05-02 14:45:00',
-      '2021-05-02 14:50:00',
-      '2021-05-02 14:55:00',
-      '2021-05-02 15:00:00',
-      '2021-05-02 15:05:00',
-      '2021-05-02 15:10:00',
-      '2021-05-02 15:15:00',
-      '2021-05-02 15:20:00',
-      '2021-05-02 15:25:00',
-      '2021-05-02 15:30:00',
-      '2021-05-02 15:35:00',
-      '2021-05-02 15:40:00',
-      '2021-05-02 15:45:00',
-      '2021-05-02 15:50:00',
-      '2021-05-02 15:55:00',
-      '2021-05-02 16:00:00',
-      '2021-05-02 16:05:00',
-      '2021-05-02 16:10:00',
-      '2021-05-02 16:15:00',
-      '2021-05-02 16:20:00',
-      '2021-05-02 16:25:00',
-      '2021-05-02 16:30:00',
-      '2021-05-02 16:35:00',
-      '2021-05-02 16:40:00',
-      '2021-05-02 16:45:00',
-      '2021-05-02 16:50:00',
-      '2021-05-02 16:55:00',
-      '2021-05-02 17:00:00',
-      '2021-05-02 17:05:00',
-      '2021-05-02 17:10:00',
-      '2021-05-02 17:15:00',
-      '2021-05-02 17:20:00',
-      '2021-05-02 17:25:00',
-      '2021-05-02 17:30:00',
-      '2021-05-02 17:35:00',
-      '2021-05-02 17:40:00',
-      '2021-05-02 17:45:00',
-      '2021-05-02 17:50:00',
-      '2021-05-02 17:55:00',
-      '2021-05-02 18:00:00',
-      '2021-05-02 18:05:00',
-      '2021-05-02 18:10:00',
-      '2021-05-02 18:15:00',
-      '2021-05-02 18:20:00',
-      '2021-05-02 18:25:00',
-      '2021-05-02 18:30:00',
-      '2021-05-02 18:35:00',
-      '2021-05-02 18:40:00',
-      '2021-05-02 18:45:00',
-      '2021-05-02 18:50:00',
-      '2021-05-02 18:55:00',
-      '2021-05-02 19:00:00',
-      '2021-05-02 19:05:00',
+      '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: [
       [
@@ -166,20 +171,32 @@ Default.args = {
         2.7, 2.32, 1.96, 1.62, 1.34, 1.05, 0.82, 0,
       ],
       [
-        6.0, 65.0, 227.0, 305.0, 375.0, 445.0, 513.0, 576.0, 629.0, 676.0,
-        730.0, 786.0, 839.0, 893.0, 943.0, 994.0, 1041.0, 1088.0, 1131.0,
-        1173.0, 1211.0, 1252.0, 1294.0, 1336.0, 1371.0, 1409.0, 1449.0, 1489.0,
-        1524.0, 1558.0, 1584.0, 1618.0, 1645.0, 807.0, 577.0, 1566.0, 1736.0,
-        1763.0, 1778.0, 1787.0, 644.0, 634.0, 627.0, 1289.0, 533.0, 575.0,
-        618.0, 1313.0, 1128.0, 602.0, 994.0, 656.0, 1799.0, 1957.0, 829.0,
-        1759.0, 1977.0, 882.0, 1683.0, 1964.0, 1960.0, 1940.0, 1941.0, 1944.0,
-        1931.0, 651.0, 1888.0, 1893.0, 1877.0, 1859.0, 1847.0, 1839.0, 1531.0,
-        920.0, 1794.0, 1772.0, 1750.0, 1723.0, 1722.0, 1709.0, 1700.0, 1677.0,
-        1646.0, 1618.0, 1595.0, 1573.0, 1551.0, 1524.0, 1491.0, 1466.0, 1434.0,
-        1399.0, 1367.0, 1334.0, 1306.0, 1264.0, 1225.0, 1186.0, 1145.0, 1097.0,
-        1056.0, 1013.0, 981.0, 937.0, 896.0, 852.0, 807.0, 762.0, 714.0, 672.0,
-        623.0, 576.0, 529.0, 483.0, 436.0, 392.0, 346.0, 303.0, 260.0, 221.0,
-        183.0, 149.0, 116.0, 91.0, 67.0, 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
index 76cd3b98..d8b6099c 100644
--- a/src/components/Charts/MultiAxisLine/ChartMultiAxisLine.vue
+++ b/src/components/Charts/MultiAxisLine/ChartMultiAxisLine.vue
@@ -1,6 +1,6 @@
 <template>
   <div :id="id" ref="line" class="multi-axis-line">
-    <MultiAxisLine :data-chart="chartdata" />
+    <MultiAxisLine v-model="data" :data-chart="chartdata" />
 
     <div class="flex justify-end">
       <span class="print" @click="print">Salvar imagem</span>
@@ -36,6 +36,18 @@ export default {
     },
   },
 
+  data() {
+    return {
+      data: null,
+    };
+  },
+
+  watch: {
+    data: function (val) {
+      this.$emit('input', val);
+    },
+  },
+
   methods: {
     print() {
       html2canvas(this.$refs.line).then(function (canvas) {
diff --git a/src/components/Charts/MultiAxisLine/MultiAxisLine.vue b/src/components/Charts/MultiAxisLine/MultiAxisLine.vue
index d0c38b5e..84325348 100644
--- a/src/components/Charts/MultiAxisLine/MultiAxisLine.vue
+++ b/src/components/Charts/MultiAxisLine/MultiAxisLine.vue
@@ -46,28 +46,11 @@ export default {
   },
 
   data: () => ({
+    colors: ['#4CD89D', '#7DD0FF', '#FF8A00', '#FF7771', '#666666', '#000'],
     chartdata: {
       labels: [],
-      datasets: [
-        {
-          backgroundColor: 'transparent',
-          borderColor: '#4CD89D',
-          lineTension: 0,
-          order: 1,
-          data: [],
-          yAxisID: 'A',
-        },
-        {
-          backgroundColor: 'transparent',
-          borderColor: '#7DD0FF',
-          lineTension: 0,
-          order: 2,
-          data: [],
-          yAxisID: 'B',
-        },
-      ],
+      datasets: [],
     },
-
     options: {
       responsive: true,
       legend: {
@@ -95,8 +78,8 @@ export default {
               offsetGridLines: true,
             },
             ticks: {
-              min: new Date('2021-05-02 01:00:00'),
-              max: new Date('2021-05-02 21:00:00'),
+              min: new Date('2021-05-02 01:00'),
+              max: new Date('2021-05-02 21:00'),
               display: true,
               beginAtZero: false,
               fontColor: '#666',
@@ -108,11 +91,11 @@ export default {
         yAxes: [
           {
             afterFit: function (scale) {
-              scale.width = 80;
+              scale.width = 74;
             },
             scaleLabel: {
               display: true,
-              labelString: 'Tensão (V)',
+              labelString: 'TENSÃO (V)',
               fontFamily: 'Lato, sans-serif',
               fontSize: '10',
               fontColor: '#999',
@@ -126,7 +109,7 @@ export default {
             gridLines: {
               drawBorder: false,
             },
-            id: 'A',
+            // id: 'A',
           },
           {
             position: 'right',
@@ -135,7 +118,7 @@ export default {
             },
             scaleLabel: {
               display: true,
-              labelString: 'Tensão (V)',
+              labelString: 'TENSÃO (V)',
               fontFamily: 'Lato, sans-serif',
               fontSize: '10',
               fontColor: '#999',
@@ -151,7 +134,7 @@ export default {
               display: false,
               drawBorder: false,
             },
-            id: 'B',
+            // id: 'B',
           },
         ],
       },
@@ -160,26 +143,7 @@ export default {
           radius: 0,
         },
       },
-      hover: {
-        animationDuration: 1,
-      },
-      tooltips: {
-        intersect: false,
-        custom: function (tooltip) {
-          if (!tooltip) return;
-          tooltip.displayColors = false;
-          tooltip.opacity = 0;
-        },
-        callbacks: {
-          title: (tooltipItem, data) => {
-            console.log(this, tooltipItem, data);
-          },
-          label: (tooltipItem, data) => {
-            console.log(this);
-            return `${data.datasets[0].data[tooltipItem['index']]} W`;
-          },
-        },
-      },
+      tooltips: null,
     },
   }),
 
@@ -200,18 +164,36 @@ export default {
 
   methods: {
     setData() {
-      this.chartdata.labels = this.dataChart.labels;
-      this.chartdata.datasets[0].data = this.dataChart.datasets[0];
-      this.chartdata.datasets[1].data = this.dataChart.datasets[1];
-    },
+      this.options.tooltips = {
+        mode: 'label',
+        intersect: false,
+        custom: (tooltip) => {
+          if (!tooltip || !tooltip.dataPoints) return;
+          tooltip.displayColors = false;
+          tooltip.opacity = 0;
+
+          const item = tooltip.dataPoints.map((obj, i) => {
+            return { ...obj, ...tooltip.labelColors[i] };
+          });
 
-    pad(num) {
-      let s = String(num);
+          this.$emit('input', item);
+        },
+      };
 
-      if (s.length < 2) {
-        s = '0' + s;
-      }
-      return s;
+      this.chartdata.labels = this.dataChart.labels;
+
+      this.dataChart.datasets.map((item, i) => {
+        this.chartdata.datasets.push({
+          label: 'jesus-' + i,
+          backgroundColor: 'transparent',
+          borderColor: this.colors[i],
+          borderWidth: 2,
+          lineTension: 0,
+          // order: i,
+          data: item,
+          // yAxisID: 'A',
+        });
+      });
     },
   },
 };

From 1695536131007f2f4e4ab6043fceac144a3d14ec Mon Sep 17 00:00:00 2001
From: Fernando Jesus <fernando.rodrigodejesus@gmail.com>
Date: Tue, 29 Jun 2021 13:58:55 -0300
Subject: [PATCH 4/5] chore: bump version package

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 3078632c..f36af1a7 100644
--- 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",

From 36e661e9916865b28e8f98874ee97cbae9e7a769 Mon Sep 17 00:00:00 2001
From: Fernando Jesus <fernando.rodrigodejesus@gmail.com>
Date: Tue, 29 Jun 2021 14:47:46 -0300
Subject: [PATCH 5/5] fix: remove comment

---
 src/components/Charts/LineSeries/LineSeries.vue | 3 ---
 1 file changed, 3 deletions(-)

diff --git a/src/components/Charts/LineSeries/LineSeries.vue b/src/components/Charts/LineSeries/LineSeries.vue
index 7b0ac071..a1adea50 100644
--- a/src/components/Charts/LineSeries/LineSeries.vue
+++ b/src/components/Charts/LineSeries/LineSeries.vue
@@ -125,9 +125,6 @@ export default {
           radius: 0,
         },
       },
-      // hover: {
-      //   animationDuration: 1,
-      // },
       tooltips: {
         intersect: false,
         yAlign: 'bottom',