@weni/unnnic-system 2.0.0 → 2.0.2

package/src/components/ChartLine/ChartLine.vue

@@ -1,14 +1,23 @@
 <template>
   <div :class="['unnnic-chart-line', { condensed }]">
-    <div v-if="title" class="header">
-      <div class="title unnnic-font secondary body-lg color-neutral-dark">{{ title }}</div>
+    <div
+      v-if="title"
+      class="header"
+    >
+      <div class="title unnnic-font secondary body-lg color-neutral-dark">
+        {{ title }}
+      </div>
     </div>
 
     <div class="main">
       <div class="reference">
         <div class="values">
           <div
-            v-for="(value, index) in [value(maxValue), value(maxValue / 2), value(0)]"
+            v-for="(value, index) in [
+              value(maxValue),
+              value(maxValue / 2),
+              value(0),
+            ]"
             :key="index"
             class="value unnnic-font secondary body-md color-neutral-cleanest"
           >
@@ -16,20 +25,30 @@
           </div>
         </div>
 
-        <div class="unnnic-font secondary body-md color-neutral-cleanest">&nbsp;</div>
+        <div class="unnnic-font secondary body-md color-neutral-cleanest">
+          &nbsp;
+        </div>
       </div>
 
       <div class="groups">
-        <div class="chart" :style="{ backgroundImage: svgChart }" ref="chart">
-          <div v-for="({ value }, index) in data" :key="index" class="group">
-            <unnnic-tool-tip
+        <div
+          class="chart"
+          :style="{ backgroundImage: svgChart }"
+          ref="chart"
+        >
+          <div
+            v-for="({ value }, index) in data"
+            :key="index"
+            class="group"
+          >
+            <UnnnicToolTip
               enabled
               :text="String(value)"
               side="top"
               :style="{ height: `${(value / maxValue) * 100}%`, width: '100%' }"
             >
               <div class="bar"></div>
-            </unnnic-tool-tip>
+            </UnnnicToolTip>
           </div>
         </div>
 
@@ -77,7 +96,7 @@ export default {
     }, 100);
   },
 
-  beforeDestroy() {
+  beforeUnmount() {
     if (this.chartContainerWidthInterval) {
       clearInterval(this.chartContainerWidthInterval);
     }
@@ -85,20 +104,19 @@ export default {
 
   computed: {
     maxValue() {
-      return this.fixedMaxValue || Math.max(
-        ...this.data
-          .map(({ value }) => value)
-          .flat(),
+      return (
+        this.fixedMaxValue ||
+        Math.max(...this.data.map(({ value }) => value).flat())
       );
     },
 
     svgChart() {
-      const bars = this.data
-        .map(
-          ({ value }) => 50
-            - (122 / 200)
-            - ((value / this.maxValue) * (50 - (122 / 100)) + Math.random() * 0.01),
-        );
+      const bars = this.data.map(
+        ({ value }) =>
+          50 -
+          122 / 200 -
+          ((value / this.maxValue) * (50 - 122 / 100) + Math.random() * 0.01),
+      );
 
       const barWidth = 100 / bars.length;
       const halfBar = barWidth / 2;
@@ -116,7 +134,9 @@ export default {
           x += barWidth;
         }
 
-        path += `C ${x - halfBar} ${bars[i - 1]} ${x - halfBar} ${bars[i]} ${x} ${bars[i]}`;
+        path += `C ${x - halfBar} ${bars[i - 1]} ${x - halfBar} ${
+          bars[i]
+        } ${x} ${bars[i]}`;
       }
 
       if (bars.length <= 1) {
@@ -140,9 +160,15 @@ export default {
             </linearGradient>
           </defs>
 
-          <g style="transform: scaleX(${this.chartContainerWidth / ((122 / 50) * 100)}); transform-origin: center;">
-            <path fill="url(#linear1)" d="M0 50 L0 ${String(bars[0]) + path} L100 50Z" />
-            <path fill="none" stroke-width="2" stroke-linecap="round" vector-effect="non-scaling-stroke" stroke="url(#linear)" d="M0 ${String(bars[0]) + path}" />
+          <g style="transform: scaleX(${
+            this.chartContainerWidth / ((122 / 50) * 100)
+          }); transform-origin: center;">
+            <path fill="url(#linear1)" d="M0 50 L0 ${
+              String(bars[0]) + path
+            } L100 50Z" />
+            <path fill="none" stroke-width="2" stroke-linecap="round" vector-effect="non-scaling-stroke" stroke="url(#linear)" d="M0 ${
+              String(bars[0]) + path
+            }" />
           </g>
         </svg>
       `;
@@ -164,7 +190,7 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-@import "../../assets/scss/unnnic.scss";
+@import '../../assets/scss/unnnic.scss';
 
 .unnnic-chart-line {
   background-color: $unnnic-color-background-snow;
@@ -261,24 +287,22 @@ export default {
   font-family: $unnnic-font-family-primary;
 
   $font-sizes:
-    "body-sm" $unnnic-font-size-body-sm,
-    "body-md" $unnnic-font-size-body-md,
-    "body-gt" $unnnic-font-size-body-gt,
-    "body-lg" $unnnic-font-size-body-lg,
-
-    "title-sm" $unnnic-font-size-title-sm,
-    "title-md" $unnnic-font-size-title-md,
-    "title-lg" $unnnic-font-size-title-lg,
-
-    "h4" $unnnic-font-size-h4,
-    "h3" $unnnic-font-size-h3,
-    "h2" $unnnic-font-size-h2,
-    "h1" $unnnic-font-size-h1;
+    'body-sm' $unnnic-font-size-body-sm,
+    'body-md' $unnnic-font-size-body-md,
+    'body-gt' $unnnic-font-size-body-gt,
+    'body-lg' $unnnic-font-size-body-lg,
+    'title-sm' $unnnic-font-size-title-sm,
+    'title-md' $unnnic-font-size-title-md,
+    'title-lg' $unnnic-font-size-title-lg,
+    'h4' $unnnic-font-size-h4,
+    'h3' $unnnic-font-size-h3,
+    'h2' $unnnic-font-size-h2,
+    'h1' $unnnic-font-size-h1;
 
   $font-weights:
-    "black" $unnnic-font-weight-black,
-    "bold" $unnnic-font-weight-bold,
-    "light" $unnnic-font-weight-light;
+    'black' $unnnic-font-weight-black,
+    'bold' $unnnic-font-weight-bold,
+    'light' $unnnic-font-weight-light;
 
   &.secondary {
     font-family: $unnnic-font-family-secondary;

package/src/components/ChartMultiLine/ChartMultiLine.vue

@@ -0,0 +1,328 @@
+<!-- eslint-disable linebreak-style -->
+<template>
+  <div :class="['unnnic-chart-line', { condensed }]">
+    <div
+      v-if="title"
+      class="header"
+    >
+      <div class="title unnnic-font secondary body-lg color-neutral-dark">
+        {{ title }}
+      </div>
+    </div>
+
+    <div class="main">
+      <div class="reference">
+        <div class="values">
+          <div
+            v-for="(value, index) in [value(maxValue), value(maxValue / 2), 0]"
+            :key="index + Math.random() * 100"
+            class="value unnnic-font secondary body-md color-neutral-cleanest"
+          >
+            {{ value }}
+          </div>
+        </div>
+
+        <div class="unnnic-font secondary body-md color-neutral-cleanest">
+          &nbsp;
+        </div>
+      </div>
+
+      <div class="lines">
+        <div class="groups">
+          <div
+            v-for="({ data }, index) in data"
+            :key="index + Math.random() * 100"
+          >
+            <Lines
+              :data="data"
+              :fixedMaxValue="maxValue"
+              :fixedMinValue="minValue"
+              :color="colors[index]"
+            />
+          </div>
+          <div
+            v-for="n in 3"
+            :key="n + Math.random() * 100"
+            class="horizontal-line color-neutral-cleanest"
+            :style="{ top: `${(n - 1) * ((122 + 67) / 3) - 8}px` }"
+          />
+        </div>
+      </div>
+    </div>
+    <div class="reference_values">
+      <div
+        v-for="(value, index) in lineData"
+        :key="index + Math.random() * 100"
+        class="title unnnic-font secondary body-md color-neutral-cleanest"
+      >
+        {{ formatValue(value) }}
+      </div>
+    </div>
+    <div class="labels">
+      <div
+        class="label unnnic-font secondary body-lg color-neutral-dark"
+        v-for="(chart, index) in data"
+        :key="index + Math.random() * 100"
+      >
+        <svg
+          width="15"
+          height="6"
+          viewBox="0 0 15 6"
+          fill="none"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <rect
+            width="15"
+            height="6"
+            rx="3"
+            :fill="colors[index]"
+          />
+        </svg>
+        {{ chart.title }} <strong>{{ findTotals(chart.data) }}</strong>
+      </div>
+    </div>
+  </div>
+</template>
+<!-- eslint-disable linebreak-style -->
+<script>
+import Lines from './Line/Line.vue';
+
+export default {
+  components: {
+    Lines,
+  },
+
+  props: {
+    condensed: Boolean,
+    fixedMaxValue: Number,
+    data: Array,
+    title: String,
+  },
+
+  data() {
+    return {
+      titles: [],
+      colors: [
+        '#3182CE',
+        '#38A169',
+        '#DD6B20',
+        '#805AD5',
+        '#E53E3E',
+        '#00A49F',
+        '#D69E2E',
+        '#00DED2',
+        '#F6AD55',
+        '#570074',
+      ],
+    };
+  },
+  computed: {
+    maxValue() {
+      return (
+        this.fixedMaxValue ||
+        Math.max(...this.data.map(({ data }) => this.findMax(data)).flat())
+      );
+    },
+    minValue() {
+      return Math.min(
+        ...this.data.map(({ data }) => this.findMin(data)).flat(),
+      );
+    },
+    lineData() {
+      return this.data[0].data.map((item) => item.title);
+    },
+  },
+
+  methods: {
+    value(value) {
+      if (this.maxValue <= 1) {
+        return value.toFixed(1);
+      }
+
+      return String(Math.ceil(value));
+    },
+    findMax(array) {
+      return Math.max(...array.map(({ value }) => value));
+    },
+    findMin(array) {
+      return Math.min(...array.map(({ value }) => value));
+    },
+    findTotals(array) {
+      const values = array.map(({ value }) => value);
+      return values.reduce(
+        (accumulator, currentValue) => accumulator + currentValue,
+        0,
+      );
+    },
+    formatValue(value) {
+      return ` ${new Date(value).toLocaleString('default', {
+        month: 'short',
+      })} ${new Date(value).getDate()}`;
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+@import '../../assets/scss/unnnic.scss';
+
+.unnnic-chart-line {
+  background-color: $unnnic-color-background-snow;
+  border-radius: $unnnic-border-radius-md;
+  padding: $unnnic-spacing-inset-md;
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  row-gap: $unnnic-spacing-stack-nano;
+  outline-style: solid;
+  outline-color: $unnnic-color-neutral-soft;
+  outline-width: $unnnic-border-width-thinner;
+  outline-offset: -$unnnic-border-width-thinner;
+  width: 100%;
+  height: 296px;
+
+  .header {
+    display: flex;
+    height: 24px;
+    width: 100%;
+  }
+
+  .labels {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    width: 100%;
+    height: 80px;
+    justify-content: space-between;
+    margin: 5px;
+  }
+
+  .titles {
+    display: flex;
+    width: 100%;
+    height: 32px;
+    .title {
+      flex: 1;
+      text-align: center;
+    }
+  }
+  .reference_values {
+    display: flex;
+    flex-direction: row;
+    padding-left: 36px;
+    justify-content: space-around;
+  }
+
+  &.condensed {
+    padding: $unnnic-spacing-inset-sm;
+
+    .main .reference {
+      margin-right: $unnnic-spacing-inline-sm;
+    }
+  }
+
+  .main {
+    height: 9.125 * $unnnic-font-size;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    .reference {
+      display: flex;
+      flex-direction: column;
+      row-gap: $unnnic-spacing-stack-nano;
+      margin-right: $unnnic-spacing-inline-md;
+      height: 146px;
+      padding-top: 48px;
+      align-items: center;
+
+      .values {
+        display: flex;
+        flex-direction: column;
+        justify-content: space-between;
+        text-align: right;
+        height: 122px;
+        width: 12px;
+      }
+    }
+
+    .lines {
+      width: 100%;
+      .groups {
+        display: flex;
+        flex: 1;
+        flex-direction: column;
+        row-gap: $unnnic-spacing-stack-nano;
+        width: 100%;
+        height: 122px;
+        position: relative;
+
+        .unnnic-tooltip:hover .bar {
+          width: 0;
+          height: 100%;
+          border-left: 1px dashed $unnnic-color-neutral-dark;
+          margin: 0 auto;
+        }
+        .horizontal-line {
+          width: 100%;
+          border-top: 0.5px dashed;
+          display: flex;
+          flex-direction: column;
+          position: absolute;
+          transform: translateY(8px);
+        }
+      }
+    }
+  }
+}
+
+@each $name, $color in $scheme-colors {
+  .color-#{$name} {
+    color: $color;
+  }
+
+  .bg-#{$name} {
+    background-color: $color;
+  }
+}
+
+.unnnic-font {
+  font-weight: $unnnic-font-weight-regular;
+  font-family: $unnnic-font-family-primary;
+
+  $font-sizes:
+    'body-sm' $unnnic-font-size-body-sm,
+    'body-md' $unnnic-font-size-body-md,
+    'body-gt' $unnnic-font-size-body-gt,
+    'body-lg' $unnnic-font-size-body-lg,
+    'title-sm' $unnnic-font-size-title-sm,
+    'title-md' $unnnic-font-size-title-md,
+    'title-lg' $unnnic-font-size-title-lg,
+    'h4' $unnnic-font-size-h4,
+    'h3' $unnnic-font-size-h3,
+    'h2' $unnnic-font-size-h2,
+    'h1' $unnnic-font-size-h1;
+
+  $font-weights:
+    'black' $unnnic-font-weight-black,
+    'bold' $unnnic-font-weight-bold,
+    'light' $unnnic-font-weight-light;
+
+  &.secondary {
+    font-family: $unnnic-font-family-secondary;
+  }
+
+  @each $name, $size in $font-sizes {
+    &.#{$name} {
+      font-size: $size;
+      line-height: $size + $unnnic-line-height-md;
+    }
+  }
+
+  @each $name, $weight in $font-weights {
+    &.#{$name} {
+      font-weight: $weight;
+    }
+  }
+}
+</style>

package/src/components/ChartMultiLine/Line/Line.vue

@@ -0,0 +1,170 @@
+<!-- eslint-disable vue/multi-word-component-names -->
+<template>
+  <div
+    class="chart"
+    :style="{ backgroundImage: svgChart }"
+    ref="chart"
+  >
+    <div
+      v-for="({ value }, index) in data"
+      :key="index + Math.random() * 100"
+      class="group"
+    >
+      <div
+        :style="{
+          transform: `translateY(-${(value / (maxValue - minValue)) * 122}px)`,
+        }"
+        class="tooltip"
+      >
+        {{ value }}
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  props: {
+    fixedMaxValue: Number,
+    fixedMinValue: Number,
+    data: Array,
+    color: String,
+  },
+
+  data() {
+    return {
+      chartContainerWidth: 0,
+      chartContainerHeight: 122,
+      minValue: 0,
+    };
+  },
+
+  mounted() {
+    this.chartContainerWidth = this.$refs.chart.offsetWidth;
+    this.chartContainerHeigth = this.$refs.chart.offsetHeight;
+    if (this.maxValue !== this.findMax(this.data)) {
+      this.minValue = this.findMin(this.data);
+    }
+  },
+  computed: {
+    maxValue() {
+      return (
+        this.fixedMaxValue ||
+        Math.max(...this.data.map(({ value }) => value).flat())
+      );
+    },
+
+    svgChart() {
+      const bars = this.data.map(
+        ({ value }) =>
+          50 -
+          122 / 200 -
+          ((value / this.maxValue) * (50 - 122 / 100) + Math.random() * 0.01),
+      );
+
+      const barWidth = 100 / bars.length;
+      const halfBar = barWidth / 2;
+
+      let path = '';
+
+      path += `L ${barWidth / 2} ${bars[0]}`;
+
+      let x = 0;
+
+      for (let i = 1; i < bars.length; i += 1) {
+        if (i === 1) {
+          x = barWidth * 1.5;
+        } else {
+          x += barWidth;
+        }
+
+        path += `C ${x - halfBar} ${bars[i - 1]} ${x - halfBar} ${
+          bars[i]
+        } ${x} ${bars[i]}`;
+      }
+
+      if (bars.length <= 1) {
+        x += barWidth / 2;
+      }
+
+      path += `L ${x + halfBar} ${bars[bars.length - 1]}`;
+
+      const svg = `
+        <svg xmlns='http://www.w3.org/2000/svg' viewBox="0 0 100 50" width="100%" height="100%">
+          <defs>
+            <linearGradient id="linear" x1="0%" y1="0%" x2="100%" y2="0%">
+              <stop offset="0%" stop-color="${this.color}" stop-opacity="1" />
+            </linearGradient>
+          </defs>
+
+          <g style="transform: scaleX(${
+            this.chartContainerWidth / ((122 / 50) * 100)
+          }); transform-origin: center;">
+            <path fill="url(#linear1)" d="M0 50 L0 ${
+              String(bars[0]) + path
+            } L100 100Z" />
+            <path fill="none" stroke-width="2" stroke-linecap="round" vector-effect="non-scaling-stroke" stroke="url(#linear)" d="M0 ${
+              String(bars[0]) + path
+            }" />
+          </g>
+        </svg>
+      `;
+
+      return `url("data:image/svg+xml,${encodeURIComponent(svg)}")`;
+    },
+  },
+  methods: {
+    findMax(array) {
+      return Math.max(...array.map(({ value }) => value));
+    },
+    findMin(array) {
+      return Math.min(...array.map(({ value }) => value));
+    },
+  },
+};
+</script>
+
+<style lang="scss">
+@import '../../../assets/scss/unnnic.scss';
+.chart {
+  width: 100%;
+  height: 100%;
+  background-repeat: no-repeat;
+  background-size: 100% 100%;
+  flex: 1;
+  display: flex;
+  position: absolute;
+  .unnnic-tooltip:hover .bar {
+    width: 0;
+    height: 100%;
+    border-left: 1px dashed $unnnic-color-neutral-dark;
+    margin: 0 auto;
+    cursor: pointer;
+  }
+
+  .group {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-end;
+
+    .tooltip {
+      display: flex;
+      height: 5px;
+      color: transparent;
+      justify-content: center;
+      align-items: flex-end;
+      position: relative;
+      z-index: 99;
+      cursor: pointer;
+    }
+
+    .tooltip:hover {
+      display: flex;
+      color: $unnnic-color-neutral-dark;
+      font-family: $unnnic-font-family-primary;
+      justify-content: center;
+      align-items: flex-end;
+    }
+  }
+}
+</style>