@mozaic-ds/chart 0.1.0-beta.0

package/src/components/radar/RadarChart.stories.ts

@@ -0,0 +1,346 @@
+// RadarChart.stories.ts
+
+import type { Meta, StoryObj } from "@storybook/vue3";
+import RadarChart from "./RadarChart.vue";
+
+const meta = {
+  title: "Charts/Radar",
+  component: RadarChart,
+} satisfies Meta<typeof RadarChart>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default = {
+  args: {
+    height: "400px",
+    labels: ["Label 1", "Label 2", "Label 3", "Label 4", "Label 5"],
+    areas: [
+      {
+        label: "currentYear",
+        areaData: [
+          {
+            value: 88.524115665,
+            position: 60.98,
+            unit: "D",
+            label: null,
+            rate: null,
+            color: "red",
+            trendValue: null,
+            trendUnit: null,
+            tooltips: null,
+          },
+          {
+            value: -3.5998021,
+            position: 46.4,
+            unit: "%",
+            label: null,
+            rate: null,
+            color: "green",
+            trendValue: null,
+            trendUnit: null,
+            tooltips: null,
+          },
+          {
+            value: 3.1604936,
+            position: 53.16,
+            unit: "%",
+            label: null,
+            rate: null,
+            color: "green",
+            trendValue: null,
+            trendUnit: null,
+            tooltips: null,
+          },
+          {
+            value: 7.787256,
+            position: 57.79,
+            unit: "%",
+            label: null,
+            rate: null,
+            color: "green",
+            trendValue: null,
+            trendUnit: null,
+            tooltips: null,
+          },
+          {
+            value: 62.2866732,
+            position: 79.76,
+            unit: "%",
+            label: null,
+            rate: null,
+            color: "red",
+            trendValue: null,
+            trendUnit: null,
+            tooltips: null,
+          },
+        ],
+      },
+      {
+        label: "previousYear",
+        areaData: [
+          {
+            value: 78.752887008,
+            position: 67.5,
+            unit: "D",
+            label: null,
+            rate: null,
+            color: null,
+            trendValue: null,
+            trendUnit: null,
+            tooltips: null,
+          },
+          {
+            value: -22.7389942,
+            position: 27.26,
+            unit: "%",
+            label: null,
+            rate: null,
+            color: null,
+            trendValue: null,
+            trendUnit: null,
+            tooltips: null,
+          },
+          {
+            value: -4.9793614,
+            position: 45.02,
+            unit: "%",
+            label: null,
+            rate: null,
+            color: null,
+            trendValue: null,
+            trendUnit: null,
+            tooltips: null,
+          },
+        ],
+      },
+    ],
+  },
+} satisfies Story;
+
+export const MultipleData = {
+  args: {
+    height: "400px",
+    labels: [
+      "Label 1",
+      "Label 2",
+      "Label 3",
+      "Label 4",
+      "Label 5",
+      "Label 6",
+      "Label 7",
+      "Label 8",
+      "Label 9",
+    ],
+    areas: [
+      {
+        label: "currentYear",
+        areaData: [
+          {
+            value: 88.524115665,
+            position: 60.98,
+            unit: "D",
+            label: null,
+            rate: null,
+            color: "red",
+            trendValue: null,
+            trendUnit: null,
+            tooltips: null,
+          },
+          {
+            value: -3.5998021,
+            position: 46.4,
+            unit: "%",
+            label: null,
+            rate: null,
+            color: "green",
+            trendValue: null,
+            trendUnit: null,
+            tooltips: null,
+          },
+          {
+            value: 3.1604936,
+            position: 53.16,
+            unit: "%",
+            label: null,
+            rate: null,
+            color: "green",
+            trendValue: null,
+            trendUnit: null,
+            tooltips: null,
+          },
+          {
+            value: 7.787256,
+            position: 57.79,
+            unit: "%",
+            label: null,
+            rate: null,
+            color: "green",
+            trendValue: null,
+            trendUnit: null,
+            tooltips: null,
+          },
+          {
+            value: 62.2866732,
+            position: 79.76,
+            unit: "%",
+            label: null,
+            rate: null,
+            color: "red",
+            trendValue: null,
+            trendUnit: null,
+            tooltips: null,
+          },
+          {
+            value: 3.8,
+            position: 76,
+            unit: "*",
+            label: null,
+            rate: null,
+            color: "red",
+            trendValue: null,
+            trendUnit: null,
+            tooltips: null,
+          },
+          {
+            value: 86.8082515,
+            position: 89.45,
+            unit: "%",
+            label: null,
+            rate: null,
+            color: "green",
+            trendValue: null,
+            trendUnit: null,
+            tooltips: null,
+          },
+          {
+            value: 94.8386888,
+            position: 79.35,
+            unit: "%",
+            label: null,
+            rate: null,
+            color: "red",
+            trendValue: null,
+            trendUnit: null,
+            tooltips: null,
+          },
+          {
+            value: 72.2144111,
+            position: 54.81,
+            unit: "%",
+            label: null,
+            rate: null,
+            color: "red",
+            trendValue: null,
+            trendUnit: null,
+            tooltips: null,
+          },
+        ],
+      },
+      {
+        label: "previousYear",
+        areaData: [
+          {
+            value: 78.752887008,
+            position: 67.5,
+            unit: "D",
+            label: null,
+            rate: null,
+            color: null,
+            trendValue: null,
+            trendUnit: null,
+            tooltips: null,
+          },
+          {
+            value: -22.7389942,
+            position: 27.26,
+            unit: "%",
+            label: null,
+            rate: null,
+            color: null,
+            trendValue: null,
+            trendUnit: null,
+            tooltips: null,
+          },
+          {
+            value: -4.9793614,
+            position: 45.02,
+            unit: "%",
+            label: null,
+            rate: null,
+            color: null,
+            trendValue: null,
+            trendUnit: null,
+            tooltips: null,
+          },
+          {
+            value: -22.8576595,
+            position: 27.14,
+            unit: "%",
+            label: null,
+            rate: null,
+            color: null,
+            trendValue: null,
+            trendUnit: null,
+            tooltips: null,
+          },
+          {
+            value: 65.1835015,
+            position: 83.07,
+            unit: "%",
+            label: null,
+            rate: null,
+            color: null,
+            trendValue: null,
+            trendUnit: null,
+            tooltips: null,
+          },
+          {
+            value: 4.181034483,
+            position: 83.62,
+            unit: "*",
+            label: null,
+            rate: null,
+            color: null,
+            trendValue: null,
+            trendUnit: null,
+            tooltips: null,
+          },
+          {
+            value: 86.8082515,
+            position: 89.45,
+            unit: "%",
+            label: null,
+            rate: null,
+            color: null,
+            trendValue: null,
+            trendUnit: null,
+            tooltips: null,
+          },
+          {
+            value: 98.120897,
+            position: 92.48,
+            unit: "%",
+            label: null,
+            rate: null,
+            color: null,
+            trendValue: null,
+            trendUnit: null,
+            tooltips: null,
+          },
+          {
+            value: 97.2715978,
+            position: 94.54,
+            unit: "%",
+            label: null,
+            rate: null,
+            color: null,
+            trendValue: null,
+            trendUnit: null,
+            tooltips: null,
+          },
+        ],
+      },
+    ],
+  },
+} satisfies Story;

package/src/components/radar/RadarChart.vue

@@ -0,0 +1,265 @@
+<template>
+  <div class="container">
+    <div class='main'>
+      <Radar
+          v-if="radarData"
+          :data='radarData'
+          :options='chartOptions'
+          :plugins="radarPlugins"
+          :chart-id='chartId'
+          :cssClasses:='cssClasses'
+          :styles='styles'
+          :style='{ height, cursor:"pointer",}'
+      />
+    </div>
+    <div ref='legendContainer' class='legendContainer' />
+  </div>
+</template>
+
+<script setup lang='ts'>
+import { PropType, ref, computed } from 'vue';
+import type { Area } from '../../types/RadarData';
+import { Radar } from 'vue-chartjs';
+import type { ActiveElement, ChartData } from 'chart.js';
+import {Context, GenericTooltipService} from '../../services/GenericTooltipService';
+import { formatWithThousandsSeprators } from '../../services/FormatUtilities';
+import { TooltipChartType } from '../../types/TooltipChartType';
+import { drawLabels } from '../../services/RadarChartFunctions';
+import type { Chart, ChartItem } from '../../services/ChartsCommonLegend';
+import {
+  Chart as ChartJS,
+  Filler,
+  Legend,
+  LineElement,
+  PointElement,
+  RadialLinearScale,
+  Title,
+  Tooltip,
+  Plugin
+} from 'chart.js';
+
+import {
+  createHtmlLegendItemText,
+  createHtmlLegendListElement,
+  createLegendCheckbox,
+  createLegendElementWithSquareArea,
+  getOrCreateLegendList,
+  hideAllButThis,
+  switchItemVisibility
+} from '../../services/ChartsCommonLegend';
+
+ChartJS.register(
+  Title,
+  Tooltip,
+  Legend,
+  RadialLinearScale,
+  LineElement,
+  PointElement,
+  Filler,
+);
+const radarComponentChartProps = defineProps({
+    chartId: {
+      type: String,
+      default: 'radar-chart',
+    },
+    height: {
+      type: String,
+      default: '400px',
+    },
+    labels: {
+    type: Array as PropType<string[]>,
+    default: () => []
+    },
+    areas: {
+      type: Array as PropType<Area[]>,
+      default: () => []
+    },
+    cssClasses: {
+      default: '',
+      type: String,
+    },
+    styles: {
+      type: Object as PropType<Partial<CSSStyleDeclaration>>,
+      default: () => {},
+    },
+    plugins: {
+      type: Array as PropType<Plugin<'radar'>[]>,
+      default: () => [],
+    },
+})
+const radarData = computed<ChartData<'radar'>>(() => ({
+  labels: getRadarLabels(),
+  datasets: [
+    {
+      label: 'Data One',
+      backgroundColor: '#BFE3E760',
+      borderColor: '#0192A0',
+      pointBackgroundColor: '#0192A000',
+      pointBorderColor: '#0192A0',
+      pointBorderWidth: 2,
+      borderWidth: 2,
+      pointHitRadius: 55,
+      pointRadius: 5,
+      pointHoverBackgroundColor: '#0192A0',
+      pointHoverBorderColor: '#0192A0',
+      data: radarComponentChartProps.areas[0].areaData.map((x: { position: number }) => x.position)
+    },
+    {
+      label: 'Data Two',
+      backgroundColor: 'rgba(231, 231, 240, .6)',
+      borderColor: '#605F9D',
+      pointBackgroundColor: 'rgba(231, 231, 240, .6)',
+      pointBorderColor: '#605F9D',
+      pointBorderWidth: 2,
+      borderWidth: 2,
+      pointHitRadius: 55,
+      pointRadius: 5,
+      pointStyle: 'rectRot',
+      pointHoverBackgroundColor: '#605F9D',
+      pointHoverBorderColor: '#605F9D',
+      data: radarComponentChartProps.areas[1].areaData.map((x: { position: number }) => x.position)
+    }
+  ]
+}));
+
+const chartOptions: any = {
+      onClick: (_ingnore: unknown, clickedElements: ActiveElement[], chart: Chart) => {
+    if (clickedElements[0]) {
+      hideAllButThis(chart, clickedElements[0].datasetIndex, selectMode);
+    }
+  },
+  plugins: {
+    htmlLegend: {
+      containerID: 'legend-container'
+    },
+    legend: {
+      display: false
+    },
+    title: {
+      display: false
+    },
+    tooltip: {
+      enabled: false,
+      position: 'nearest' as const,
+      external: function (context: Context) {
+        new GenericTooltipService().createTooltip(
+          context,
+          getTooltipData,
+          { chartType: TooltipChartType.RADAR }
+        );
+      }
+    }
+  },
+  layout: {
+    padding: 65
+  },
+  scales: {
+    r: {
+      min: 0,
+      max: 100,
+      pointLabels: {
+          display: false,
+          font: {
+            size: 16
+        }
+      },
+      ticks: {
+        display: false,
+        stepSize: 25
+      }
+    }
+  }
+    };
+const legendContainer = ref(null);
+const selectMode = ref(false);
+function splitLabelIfTooLong (axisLabel: string, buildValue: string) {
+  const radarLimitLabelLength = 15;
+  if (axisLabel.length > radarLimitLabelLength && axisLabel.includes(' ', radarLimitLabelLength)) {
+    const indexOfFirstSpaceAfterLimit: number = axisLabel.indexOf(' ', radarLimitLabelLength);
+    return [
+      axisLabel.substring(0, indexOfFirstSpaceAfterLimit),
+      axisLabel.substring(indexOfFirstSpaceAfterLimit),
+      buildValue
+    ];
+  }
+  return [
+    axisLabel,
+    buildValue
+  ];
+}
+const getRadarLabels = () => {
+  return radarComponentChartProps.labels.map((label: string, index: number) => {
+    const buildValue = radarComponentChartProps.areas[0].areaData[index].value
+      ? `${formatNumber(radarComponentChartProps.areas[0].areaData[index].value + '')} ${radarComponentChartProps.areas[0].areaData[index].unit}`
+      : 'No Data';
+    return splitLabelIfTooLong(label, buildValue);
+  });
+}
+const formatNumber = (numberFromJson: string) => {
+  return formatWithThousandsSeprators(parseFloat(numberFromJson));
+};
+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 radarPlugins = [{
+  id: 'htmlLegend',
+  afterUpdate (chart: any) {
+    const ul = getOrCreateLegendList(legendContainer, 'row');
+    while (ul.firstChild) {
+      ul.firstChild.remove();
+    }
+    const items = chart.options.plugins.legend.labels.generateLabels(chart).reverse();
+    items.forEach((item: ChartItem) => {
+      const li = createHtmlLegendListElement(chart, selectMode, item.datasetIndex);
+      let liContent;
+      li.style.marginRight = '0.625rem';
+      if (!selectMode.value) {
+        liContent = createLegendElementWithSquareArea(item);
+      } else {
+        liContent = createLegendElementWithCheckbox(chart, item);
+      }
+      li.appendChild(liContent);
+      li.appendChild(createHtmlLegendItemText(item));
+      ul.appendChild(li);
+    });
+  }
+},{
+  id: 'radarLabelPlugin',
+  beforeDraw (chart: any) {
+    drawLabels(chart, radarComponentChartProps);
+  },
+}];
+
+const getTooltipData = (context: Context): string => {
+    const datasetIndex: number | undefined = context.tooltip.dataPoints[0].datasetIndex;
+    const dataIndex: number | undefined = context.tooltip.dataPoints[0].dataIndex;
+    if (datasetIndex && dataIndex) {
+        const data = radarComponentChartProps.areas[datasetIndex];
+        return data.areaData[dataIndex].value.toFixed(2) + ' ' +
+          data.areaData[dataIndex].unit;
+    }
+    return '';
+};
+</script>
+
+<style scoped>
+.container {
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-font-smoothing: antialiased;
+  font-weight: 400;
+  font-family: 'Roboto', sans-serif;
+}
+.main {
+  height: 600px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
+</style>

package/src/main.ts

@@ -0,0 +1,6 @@
+import BarChart from "./components/bar/BarChart.vue";
+import DoughnutChart from "./components/doughnut/DoughnutChart.vue";
+import LineChart from "./components/line/LineChart.vue";
+import RadarChart from "./components/radar/RadarChart.vue";
+
+export { BarChart, DoughnutChart, LineChart, RadarChart };