@weni/unnnic-system 3.31.1-alpha.2 → 3.32.0

package/src/components/ChartMultiLine/ChartMultiLine.vue

@@ -0,0 +1,326 @@
+<!-- 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-fg-base">
+        {{ 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-fg-muted"
+          >
+            {{ value }}
+          </div>
+        </div>
+
+        <div class="unnnic-font secondary body-md color-fg-muted">&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-fg-muted"
+            :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-fg-muted"
+      >
+        {{ formatValue(value) }}
+      </div>
+    </div>
+    <div class="labels">
+      <div
+        v-for="(chart, index) in data"
+        :key="index + Math.random() * 100"
+        class="label unnnic-font secondary body-lg color-fg-base"
+      >
+        <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>
+@use '@/assets/scss/unnnic' as *;
+
+.unnnic-chart-line {
+  background-color: $unnnic-color-bg-base;
+  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-bg-muted;
+  outline-width: 1px;
+  outline-offset: -1px;
+  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-fg-base;
+          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
+    ref="chart"
+    class="chart"
+    :style="{ backgroundImage: svgChart }"
+  >
+    <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,
+    };
+  },
+  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)}")`;
+    },
+  },
+
+  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);
+    }
+  },
+  methods: {
+    findMax(array) {
+      return Math.max(...array.map(({ value }) => value));
+    },
+    findMin(array) {
+      return Math.min(...array.map(({ value }) => value));
+    },
+  },
+};
+</script>
+
+<style lang="scss">
+@use '@/assets/scss/unnnic' as *;
+.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-fg-base;
+    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-fg-base;
+      font-family: $unnnic-font-family-primary;
+      justify-content: center;
+      align-items: flex-end;
+    }
+  }
+}
+</style>

package/src/components/ChartRainbow/ChartRainbow.vue

@@ -0,0 +1,201 @@
+<template>
+  <div class="unnnic-chart-rainbow">
+    <svg
+      width="332"
+      height="166"
+      class="semicircle"
+    >
+      <defs xmlns="http://www.w3.org/2000/svg">
+        <linearGradient
+          id="paint0_linear_10224_36584"
+          x1="178"
+          y1="45"
+          x2="28"
+          y2="198"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop stop-color="#00DED2" />
+          <stop
+            offset="1"
+            stop-color="#00DED2"
+            stop-opacity="0"
+          />
+        </linearGradient>
+      </defs>
+
+      <path
+        id="path"
+        ref="background"
+        fill="none"
+        stroke-linecap="round"
+        class="background"
+        stroke-width="26.56px"
+      ></path>
+
+      <path
+        id="path"
+        ref="front"
+        fill="none"
+        stroke-linecap="round"
+        class="front"
+        stroke-width="26.56px"
+      ></path>
+    </svg>
+
+    <div class="content">
+      <div class="percentage">
+        <span class="number">{{ modelValue }} </span>
+        <span class="symbol">%</span>
+      </div>
+
+      <div
+        v-if="description"
+        class="description"
+      >
+        {{ description }}
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  components: {},
+
+  props: {
+    modelValue: {
+      type: Number,
+      default: 0,
+    },
+
+    description: {
+      type: String,
+    },
+  },
+
+  watch: {
+    modelValue() {
+      this.updateChartSvg();
+    },
+  },
+
+  mounted() {
+    this.updateChartSvg();
+  },
+
+  methods: {
+    updateChartSvg() {
+      function polarToCartesian(centerX, centerY, radius, angleInDegrees) {
+        const angleInRadians = ((angleInDegrees - 90) * Math.PI) / 180.0;
+
+        return {
+          x: centerX + radius * Math.cos(angleInRadians),
+          y: centerY + radius * Math.sin(angleInRadians),
+        };
+      }
+
+      function describeArc(
+        x,
+        y,
+        innerRadius,
+        outerRadius,
+        startAngle,
+        endAngle,
+      ) {
+        const radius = innerRadius;
+        const spread = outerRadius - innerRadius;
+        const outerStart = polarToCartesian(x, y, radius + spread, endAngle);
+        const outerEnd = polarToCartesian(x, y, radius + spread, startAngle);
+
+        const largeArcFlag = endAngle - startAngle <= 180 ? '0' : '1';
+
+        const d = [
+          'M',
+          outerStart.x,
+          outerStart.y,
+          'A',
+          radius + spread,
+          radius + spread,
+          0,
+          largeArcFlag,
+          0,
+          outerEnd.x,
+          outerEnd.y,
+        ].join(' ');
+
+        return d;
+      }
+
+      const path = describeArc(166, 166, 139.44, 152.72, -85, 85);
+
+      this.$refs.background.setAttribute('d', path);
+
+      this.$refs.front.setAttribute(
+        'd',
+        describeArc(
+          166,
+          166,
+          139.44,
+          152.72,
+          -85,
+          -85 + (this.modelValue / 100) * 170,
+        ),
+      );
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+@use '@/assets/scss/unnnic' as *;
+
+.unnnic-chart-rainbow {
+  position: relative;
+  width: fit-content;
+
+  .semicircle {
+    display: block;
+  }
+
+  .background {
+    stroke: $unnnic-color-bg-base-soft;
+  }
+
+  .front {
+    stroke: url(#paint0_linear_10224_36584);
+  }
+
+  .content {
+    position: absolute;
+    bottom: 0;
+    text-align: center;
+    width: 100%;
+
+    .percentage {
+      font-family: $unnnic-font-family-secondary;
+      font-weight: $unnnic-font-weight-black;
+
+      .number {
+        color: $unnnic-color-fg-emphasized;
+        font-size: $unnnic-font-size-h3;
+        line-height: $unnnic-font-size-h3 + $unnnic-line-height-md;
+      }
+
+      .symbol {
+        color: $unnnic-color-fg-muted;
+        font-size: $unnnic-font-size-h4;
+        line-height: $unnnic-font-size-h4 + $unnnic-line-height-md;
+      }
+    }
+
+    .description {
+      color: $unnnic-color-fg-muted;
+      font-family: $unnnic-font-family-secondary;
+      font-size: $unnnic-font-size-body-lg;
+      line-height: $unnnic-font-size-body-lg + $unnnic-line-height-md;
+      font-weight: $unnnic-font-weight-regular;
+      margin-top: $unnnic-spacing-stack-nano;
+    }
+  }
+}
+</style>