@mozaic-ds/chart 0.1.0-beta.0

package/src/components/doughnut/DoughnutChart.stories.ts

@@ -0,0 +1,80 @@
+// DoughnutChart.stories.ts;
+
+import type { Meta, StoryObj } from "@storybook/vue3";
+import DoughnutChart from "./DoughnutChart.vue";
+
+const meta = {
+  title: "Charts/Doughnut",
+  component: DoughnutChart,
+} satisfies Meta<typeof DoughnutChart>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default = {
+  args: {
+    height: "400px",
+    width: "400px",
+    labels: ["Data One", "Data Two"],
+    data: [
+      {
+        value: 2771824.19,
+        unit: "€",
+        rate: 30.186240355262925,
+      },
+      {
+        value: 1715453.65,
+        unit: "€",
+        rate: 18.68195550931139,
+      },
+    ],
+  },
+} satisfies Story;
+
+export const MultipleData = {
+  args: {
+    height: "400px",
+    width: "400px",
+    labels: [
+      "Data One",
+      "Data Two",
+      "Data Three",
+      "Data Four",
+      "Data Five",
+      "Data Six",
+    ],
+    maxValues: 3,
+    data: [
+      {
+        value: 2771824.19,
+        unit: "€",
+        rate: 30.186240355262925,
+      },
+      {
+        value: 1715453.65,
+        unit: "€",
+        rate: 18.68195550931139,
+      },
+      {
+        value: 1651575.28,
+        unit: "€",
+        rate: 17.986295287685856,
+      },
+      {
+        value: 1168958.3,
+        unit: "€",
+        rate: 12.730409214402426,
+      },
+      {
+        value: 949837.87,
+        unit: "€",
+        rate: 10.34410275579238,
+      },
+      {
+        value: 924760.17,
+        unit: "€",
+        rate: 10.070996877545035,
+      },
+    ],
+  },
+} satisfies Story;

package/src/components/doughnut/DoughnutChart.vue

@@ -0,0 +1,208 @@
+<template>
+  <div class="container">
+    <div class="main">
+      <Doughnut 
+            v-if="doughnutChartData" 
+            ref='doughnutRef' 
+            :data='doughnutChartData as ChartData<"doughnut", number[], unknown>'
+            :options='options' 
+            :plugins='htmlLegendPlugin'
+            :cssClasses:="cssClasses"
+            :max-values="maxValues"
+            :style='{width, height, cursor:"pointer"}'
+          />
+        </div>
+        <div ref="legendContainer" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { onMounted, watch } from 'vue';
+import { Doughnut } from 'vue-chartjs';
+import type { ChartData } from 'chart.js';
+import { computed, ref, PropType } from 'vue';
+import type { DoughnutData } from '../../types/DoughnutData';
+import { TooltipChartType } from '../../types/TooltipChartType';
+import type { Context } from '../../services/GenericTooltipService';
+import doughnutChartFunction from '../../services/DoughnutChartFunctions';
+import { GenericTooltipService } from '../../services/GenericTooltipService';
+import { formatWithThousandsSeprators } from '../../services/FormatUtilities';
+import type { GenericData } from '../../types/GenericData';
+import ChartDesign from '../../services/patterns/ChartDesign';
+import {
+  Chart as ChartJS,
+  Title,
+  Tooltip,
+  Legend,
+  ArcElement,
+  Plugin
+} from 'chart.js';
+ChartJS.register(
+  Title,
+  Tooltip,
+  Legend,
+  ArcElement
+);
+
+const {
+  patternsColors,
+  patternsColorsLowerOpacity
+} = ChartDesign();
+
+const {
+  onHoverIndex,
+  doughnutRef,
+  backgroundColor,
+  privateGetHtmlLegendPlugin,
+  getOnHoverOptions,
+  groupDataAfterNthValue,
+  getDoughnutLabels,
+  getBackgroundColor,
+} = doughnutChartFunction();
+const selectMode = ref(false);
+const legendContainer = ref<HTMLElement | null>(null);
+
+const doughnutDataProps = defineProps({
+  chartId: {
+    type: String,
+    default: 'doughnut-chart',
+  },
+  data: {
+    type: Array as PropType<DoughnutData[]>,
+    default: () => []
+  },
+  labels: {
+    type: Array as PropType<string[]>,
+    default: () => []
+  },
+  cssClasses: {
+    default: '',
+    type: String,
+  },
+  width: {
+      type: String,
+      default: '400px',
+  },
+  height: {
+    type: String,
+    default: '400px',
+  },
+  maxValues: {
+    type: Number,
+    default: 5,
+  },
+  styles: {
+    type: Object as PropType<Partial<CSSStyleDeclaration>>,
+    default: () => {
+    },
+  },
+  plugins: {
+    type: Array as PropType<Plugin<'doughnut'>[]>,
+    default: () => [],
+  },
+})
+
+const doughnutChartData = computed(() => {
+  return {
+    labels: getDoughnutLabels(doughnutDataProps.labels,
+    doughnutDataProps.data, doughnutDataProps.maxValues),
+    datasets: [
+      {
+        data: groupDataAfterNthValue(doughnutDataProps.data, doughnutDataProps.maxValues).map((x: GenericData) => x.rate),
+        backgroundColor: backgroundColor.value,
+      }
+    ]
+  }
+});
+
+const getTooltipData = (context: Context) => {
+  const dataIndex = context.tooltip.dataPoints[0].dataIndex;
+  if (!dataIndex) {
+    return '';
+  }
+  const tooltipData = 
+    groupDataAfterNthValue(doughnutDataProps.data, doughnutDataProps.maxValues)[dataIndex];
+  const rate = formatWithThousandsSeprators(tooltipData.rate);
+  const value = formatWithThousandsSeprators(tooltipData.value);
+  const unit = tooltipData.unit || '';
+  return `${value}${unit} (${rate})%`;
+};
+
+function getSpacing () {
+  return doughnutDataProps.labels.length <= 1 ? 0 : 12;
+}
+
+// @ts-ignore
+const options = computed(() => ({
+  onHover: getOnHoverOptions(),
+  plugins: {
+    legend: {
+      display: false,
+      // @ts-ignore
+      position: 'bottom' as const,
+      align: 'start' as const,
+      labels: {
+        pointStyle: 'rectRounded',
+        usePointStyle: true
+      }
+    },
+    title: {
+      display: false
+    },
+    tooltip: {
+      enabled: false,
+      external: function (context: Context) {
+        new GenericTooltipService().createTooltip(
+          context,
+          getTooltipData,
+          {
+            chartType: TooltipChartType.DOUGHNUT
+          }
+        );
+      }
+    }
+  },
+  radius: '90%',
+  cutout: '70%',
+  borderWidth: 3,
+  borderColor: function (context: any) {
+    return (onHoverIndex.value !== null && context.dataIndex !== (onHoverIndex.value))
+      ? patternsColorsLowerOpacity[context.dataIndex]
+      : patternsColors[context.dataIndex];
+  },
+  spacing: getSpacing(),
+  hoverOffset: 4
+}));
+
+const doughnutDataAndLabels = {
+  data: doughnutDataProps.data,
+  labels: doughnutDataProps.labels
+}
+
+const htmlLegendPlugin = computed(() => privateGetHtmlLegendPlugin(legendContainer, selectMode, doughnutDataProps.maxValues, doughnutDataAndLabels));
+
+onMounted(() =>{
+  getBackgroundColor();
+});
+watch(onHoverIndex, (newValue, oldValue) => {
+  if (newValue !== oldValue) {
+    getBackgroundColor();
+  }
+});
+</script>
+
+<style scoped>
+.container {
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-font-smoothing: antialiased;
+  font-weight: 400;
+  font-family: 'Roboto', sans-serif;
+}
+
+.main {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
+</style>

package/src/components/line/LineChart.stories.ts

@@ -0,0 +1,60 @@
+// LineChart.stories.ts;
+
+import type { Meta, StoryObj } from "@storybook/vue3";
+import LineChart from "./LineChart.vue";
+
+const meta = {
+  title: "Charts/Line",
+  component: LineChart,
+} satisfies Meta<typeof LineChart>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default = {
+  args: {
+    rawTitle: "Line title",
+    width: "600px",
+    height: "400px",
+    labels: ["Data One", "Data Two", "Data Three"],
+    lines: [
+      {
+        label: "Data One",
+        data: [-22, 34, 11],
+        unit: "%",
+      },
+      {
+        label: "Data Two",
+        data: [-3, 28, 35],
+        unit: "%",
+      },
+    ],
+  },
+} satisfies Story;
+
+export const MultipleData = {
+  args: {
+    width: "600px",
+    height: "400px",
+    labels: [
+      "Data One",
+      "Data Two",
+      "Data Three",
+      "Data Four",
+      "Data Five",
+      "Data Six",
+    ],
+    lines: [
+      {
+        label: "Data One",
+        data: [-22, 34, 11, 1, 22, 21],
+        unit: "%",
+      },
+      {
+        label: "Data Two",
+        data: [-3, 28, 35, 10, 3, 18],
+        unit: "%",
+      },
+    ],
+  },
+} satisfies Story;

package/src/components/line/LineChart.vue

@@ -0,0 +1,245 @@
+<template>
+  <div class="container">
+    <div class="main">
+        <Line
+            v-if="chartData"
+            ref="cockpitLineChartRef"
+            :data="chartData"
+            :options="options"
+            :plugins='htmlLegendPlugin'
+            :chart-id='chartId'
+            :cssClasses:='cssClasses'
+            :styles='styles'
+            :style='{ width, height, cursor:"pointer"}'
+        />
+      </div>
+      <div ref="legendContainer" />
+  </div>
+  </template>
+  
+  <script setup lang="ts">
+  
+  import type { Ref } from 'vue';
+  import { computed, ref, PropType } from 'vue';
+  import { Line } from 'vue-chartjs';
+  import { LineData } from '../../types/LineChart';
+  import { GenericTooltipService } from '../../services/GenericTooltipService';
+  import type { Context } from '../../services/GenericTooltipService';
+  import { TooltipChartType } from '../../types/TooltipChartType';
+  import { formatTicks } from '../../services/FormatUtilities';
+  import type { ChartItem } from '../../services/ChartsCommonLegend';
+  
+  import {
+    createHtmlLegendItemText,
+    createHtmlLegendListElement,
+    createLegendElementWithSquareArea,
+    getOrCreateLegendList,
+    createLegendCheckbox,
+    switchItemVisibility
+  } from '../../services/ChartsCommonLegend';
+  
+  import {
+    CategoryScale,
+    Chart as ChartJS,
+    Legend,
+    LinearScale,
+    LineElement,
+    PointElement,
+    Title,
+    Tooltip,
+    Plugin
+  } from 'chart.js';
+  
+  ChartJS.register(
+    Title,
+    Tooltip,
+    Legend,
+    PointElement,
+    LineElement,
+    CategoryScale,
+    LinearScale
+  );
+  
+  const legendContainer = ref(null);
+  const selectMode = ref(false);
+  const lineDataProps = defineProps({
+    chartId: {
+        type: String,
+        default: 'radar-chart',
+    },
+    rawTitle: {
+      type: String,
+      default: 'sales',
+    },
+    width: {
+      type: String,
+      default: '200px',
+    },
+    height: {
+      type: String,
+      default: '400px',
+    },
+    lines: {
+        type: Array as PropType<LineData[]>,
+        default: () => {},
+    },
+    labels: {
+        type: Array as PropType<string[]>,
+        default: () => []
+    },
+    cssClasses: {
+        default: '',
+        type: String,
+    },
+    styles: {
+        type: Object as PropType<Partial<CSSStyleDeclaration>>,
+        default: () => {},
+    },
+    plugins: {
+        type: Array as PropType<Plugin<'line'>[]>,
+        default: () => [],
+    },
+})
+  
+  const getTooltipData = (context: Context) => {
+    const datasetIndex = context.tooltip.dataPoints[0].datasetIndex;
+    const dataIndex = context.tooltip.dataPoints[0].dataIndex;
+    if (!dataIndex || !datasetIndex) {
+        return '';
+    }
+    const formattedValue = lineDataProps.lines[datasetIndex].data[dataIndex].toFixed(2);
+    return lineDataProps.lines[datasetIndex].unit ? formattedValue +
+      ' ' + lineDataProps.lines[datasetIndex].unit
+      : formattedValue;
+  };
+  
+  const tooltipFirstLine = 'months';
+  const tooltipValueAttribute = computed(() => {
+    return lineDataProps.rawTitle;
+  });
+  
+  const chartData = computed(() => {
+    return {
+      labels: lineDataProps.labels.map((label: string) => label),
+      datasets: [
+        {
+          type: 'line' as const,
+          borderColor: '#605F9D',
+          pointStyle: 'rectRot',
+          pointBackgroundColor: '#FFFFFF',
+          pointRadius: 5,
+          label: lineDataProps.lines[0].label,
+          data: lineDataProps.lines[0].data,
+          borderWidth: 2
+        },
+        {
+          type: 'line' as const,
+          borderColor: '#00919F',
+          pointStyle: 'circle',
+          pointBackgroundColor: '#FFFFFF',
+          pointRadius: 5,
+          label: lineDataProps.lines[1].label,
+          data: lineDataProps.lines[1].data,
+          borderWidth: 2
+        }
+      ]
+    };
+  });
+  
+  function getHtmlLegendPlugin(legendContainer: Ref, selectMode: Ref) {
+    return [{
+      id: 'htmlLegend',
+      afterUpdate (chart: any) {
+        const ul = getOrCreateLegendList(legendContainer, 'column');
+        ul.style.display = 'flex';
+        ul.style.flexDirection = 'row';
+        while (ul.firstChild) {
+          ul.firstChild.remove();
+        }
+        const items = chart.options.plugins.legend.labels.generateLabels(chart);
+        items.forEach((item: ChartItem) => {
+            const li = createHtmlLegendListElement(chart, selectMode, item.datasetIndex);
+            let liContent: HTMLElement;
+            if (!selectMode.value) {
+                liContent = createLegendElementWithSquareArea(item);
+              } else {
+                liContent = createLegendElementWithCheckbox(chart, item);
+              }
+            li.style.marginRight = '10px';
+            li.appendChild(liContent);
+            li.appendChild(createHtmlLegendItemText(item));
+            ul.appendChild(li);
+        });
+      }
+    }];
+  }
+
+  function createLegendElementWithCheckbox (chart: any, item: ChartItem) {
+  const liContent = createLegendCheckbox(chart, item);
+  liContent.onclick = (e: Event) => {
+    switchItemVisibility(chart, item.datasetIndex, selectMode);
+    e.stopPropagation();
+  };
+  return liContent;
+}
+  
+  const htmlLegendPlugin = getHtmlLegendPlugin(legendContainer, selectMode);
+  
+  const options = computed(() => ({
+    responsive: true,
+    maintainAspectRatio: true,
+    plugins: {
+      legend: {
+        display: false
+      },
+      tooltip: {
+        enabled: false,
+        external: function (context: Context) {
+          new GenericTooltipService().createTooltip(
+            context,
+            getTooltipData,
+            {
+              chartType: TooltipChartType.LINE_CHART,
+              firstLineLabel: tooltipFirstLine,
+              secondLineLabel: tooltipValueAttribute.value
+            }
+          );
+        }
+      }
+    },
+    scales: {
+      y: {
+        type: 'linear' as const,
+        display: true,
+        position: 'left' as const,
+        grid: {
+          drawOnChartArea: true
+        },
+        ticks: {
+          callback: function (val: number | string) {
+            const unit = lineDataProps.lines[0].unit;
+            return formatTicks(val as number, unit ? unit : null);
+          },
+          maxTicksLimit: 8,
+        }
+      }
+    }
+  }));
+  </script>
+  
+  <style scoped>
+  .container {
+    -moz-osx-font-smoothing: grayscale;
+    -webkit-font-smoothing: antialiased;
+    font-weight: 400;
+    font-family: 'Roboto', sans-serif;
+  }
+  .main {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    margin-bottom: 20px;
+  }
+  </style>
+