@mekari/pixel3-chart 0.0.1-dev.0

package/dist/chunk-5SYLA56O.mjs

@@ -0,0 +1,624 @@
+import {
+  __name
+} from "./chunk-QZ7VFGWC.mjs";
+
+// src/modules/chart.hooks.ts
+import { computed, watch, ref, shallowRef, toRefs, onMounted, onUnmounted } from "vue";
+import { getUniqueId } from "@mekari/pixel3-utils";
+import { chartSlotRecipe } from "@mekari/pixel3-styled-system/recipes";
+import { token } from "@mekari/pixel3-styled-system/tokens";
+import { merge } from "lodash-es";
+import Color from "color";
+import Chart from "chart.js/auto";
+import ChartDataLabels from "chartjs-plugin-datalabels";
+function useChart(props, emit) {
+  const {
+    id,
+    title,
+    type,
+    widthChart,
+    heightChart,
+    widthContainer,
+    heightContainer,
+    data,
+    options,
+    colorPattern,
+    colorStart,
+    colorRatio,
+    legendPosition,
+    legendDirection,
+    tooltipMarginTop,
+    tooltipMarginLeft,
+    isShowDataLabels,
+    isHorizontal,
+    isStacked,
+    isArea,
+    isDebug,
+    isShowBackgroundHover,
+    isShowGaugePointer,
+    isMixedChart,
+    tooltipOptions
+  } = toRefs(props);
+  const chart = shallowRef(null);
+  const tooltip = ref({
+    top: 0,
+    left: 0,
+    opacity: 0,
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    data: null
+  });
+  const legend = ref([]);
+  const baseColor = ref();
+  const chartContainerNode = ref();
+  const chartLegendNode = ref();
+  const chartCanvasNode = ref();
+  const getId = id.value || getUniqueId("", "chart").value;
+  const isHorizontalBarChart = computed(() => {
+    return type.value === "bar" && isHorizontal.value;
+  });
+  const isCircularChart = computed(() => {
+    return type.value === "pie" || type.value === "doughnut";
+  });
+  const getLegendPosition = computed(() => {
+    let position = "column";
+    if (legendPosition.value === "right") {
+      position = "row";
+    }
+    if (legendPosition.value === "top") {
+      position = "column-reverse";
+    }
+    if (legendPosition.value === "left") {
+      position = "row-reverse";
+    }
+    return position;
+  });
+  const getLegendDirection = computed(() => {
+    let direction = "flex-start";
+    if (legendDirection.value === "center") {
+      direction = "center";
+    }
+    if (legendDirection.value === "right") {
+      direction = "flex-end";
+    }
+    return direction;
+  });
+  const getOptions = computed(() => {
+    const basicOptions = {
+      maintainAspectRatio: false,
+      responsive: true,
+      animation: true,
+      cutout: type.value === "doughnut" ? 70 : 0,
+      ...isHorizontalBarChart.value && {
+        indexAxis: "y"
+      },
+      interaction: {
+        intersect: !isArea.value
+      },
+      plugins: {
+        PluginHtmlLegend: true,
+        PluginHoverBackgroundColors: isShowBackgroundHover.value,
+        gaugeChartPointer: isShowGaugePointer.value,
+        title: {
+          display: false
+        },
+        legend: {
+          display: false
+        },
+        tooltip: {
+          enabled: false,
+          position: "average",
+          external: handleExternalTooltip
+        },
+        filler: {
+          propagate: false
+        },
+        datalabels: {
+          display: isShowDataLabels.value,
+          color: "#626B79",
+          clamp: true,
+          font: {
+            size: 10
+          },
+          labels: {
+            value: {
+              anchor: "end",
+              align: "end"
+            }
+          }
+        }
+      },
+      elements: {
+        bar: {
+          backgroundColor: getListColors.value[1],
+          borderRadius: "4",
+          ...isStacked.value && {
+            borderWidth: {
+              top: !isHorizontal.value ? 2 : 0,
+              right: isHorizontal.value ? 2 : 0
+            },
+            borderColor: "#FFFFFF"
+          }
+        },
+        line: {
+          borderColor: isArea.value ? "#FFFFFF" : getListColors.value[1],
+          borderWidth: 2,
+          tension: isArea.value ? 0.4 : 0
+        },
+        point: {
+          radius: isArea.value || type.value === "radar" ? 0 : 6,
+          borderWidth: 2,
+          hoverRadius: isArea.value || type.value === "radar" ? 0 : 6,
+          hoverBorderWidth: 2
+        },
+        arc: {
+          backgroundColor: getListColors.value[1],
+          borderColor: "#FFFFFF",
+          hoverBorderColor: "#FFFFFF"
+        }
+      },
+      scales: {
+        x: {
+          stacked: isStacked.value,
+          border: {
+            display: false
+          },
+          grid: {
+            display: false,
+            drawOnChartArea: false,
+            drawTicks: false
+          },
+          ticks: {
+            display: !isCircularChart.value && type.value !== "radar",
+            color: "#626B79"
+          }
+        },
+        y: {
+          stacked: isStacked.value,
+          border: {
+            display: false
+          },
+          grid: {
+            display: !isHorizontal.value,
+            drawOnChartArea: !isCircularChart.value && type.value !== "radar",
+            drawTicks: false,
+            color: "#D0D6DD"
+          },
+          ticks: {
+            display: !isCircularChart.value && type.value !== "radar",
+            beginAtZero: true,
+            color: "#626B79",
+            padding: 8
+          }
+        },
+        ...type.value === "radar" && {
+          r: {
+            angleLines: {
+              display: true,
+              color: "#D0D6DD"
+            },
+            grid: {
+              color: "#D0D6DD"
+            },
+            ticks: {
+              color: "#626B79"
+            },
+            pointLabels: {
+              color: "#626B79"
+            }
+          }
+        }
+      }
+    };
+    return merge(basicOptions, options.value);
+  });
+  const getDataset = computed(() => {
+    const datasets = data.value.datasets || [];
+    if (type.value === "bar") {
+      datasets.forEach((item, index) => {
+        item.backgroundColor = item.backgroundColor || handleColorPattern(index);
+        item.barPercentage = item.barPercentage || 0.68;
+        item.categoryPercentage = item.categoryPercentage || 1;
+      });
+    }
+    if (isCircularChart.value) {
+      const backgroundColor = [];
+      datasets.forEach((item) => {
+        item.data.forEach((_, index) => {
+          return backgroundColor.push(handleColorPattern(index));
+        });
+        item.backgroundColor = item.backgroundColor || backgroundColor;
+      });
+    }
+    if (isArea.value && (type.value === "line" || isMixedChart.value)) {
+      datasets.forEach((item, index) => {
+        item.fill = "start";
+        item.backgroundColor = item.backgroundColor || handleColorPattern(index);
+      });
+    }
+    if (!isArea.value && (type.value === "line" || type.value === "radar" || isMixedChart.value)) {
+      const isFading = type.value === "radar";
+      datasets.forEach((item, index) => {
+        item.backgroundColor = item.backgroundColor || handleColorPattern(index, isFading);
+        item.borderColor = item.borderColor || handleColorPattern(index);
+        item.pointBackgroundColor = item.pointBackgroundColor || "#FFFFFF";
+      });
+    }
+    return datasets;
+  });
+  const getListColors = computed(() => {
+    return {
+      1: token("colors.sky.400"),
+      2: token("colors.sky.100"),
+      3: token("colors.teal.400"),
+      4: token("colors.teal.100"),
+      5: token("colors.violet.400"),
+      6: token("colors.violet.100"),
+      7: token("colors.amber.400"),
+      8: token("colors.amber.100"),
+      9: token("colors.rose.400"),
+      10: token("colors.rose.100"),
+      11: token("colors.stone.400"),
+      12: token("colors.stone.100"),
+      13: token("colors.lime.400"),
+      14: token("colors.lime.100"),
+      15: token("colors.pink.400"),
+      16: token("colors.pink.100"),
+      17: token("colors.apricot.400"),
+      18: token("colors.apricot.100"),
+      19: token("colors.aqua.400"),
+      20: token("colors.aqua.100"),
+      21: token("colors.leaf.400"),
+      22: token("colors.leaf.100"),
+      23: token("colors.fuchsia.400"),
+      24: token("colors.fuchsia.100")
+    };
+  });
+  const rootAttrs = computed(() => {
+    return {
+      "data-pixel-component": "MpChart",
+      id: getId,
+      class: chartSlotRecipe().root,
+      style: {
+        width: widthContainer.value
+      }
+    };
+  });
+  const chartHeaderAttrs = computed(() => {
+    return {
+      class: chartSlotRecipe().chartHeader
+    };
+  });
+  const chartWrapperAttrs = computed(() => {
+    return {
+      class: chartSlotRecipe().chartWrapper,
+      style: {
+        flexDirection: getLegendPosition.value
+      }
+    };
+  });
+  const chartContainerAttrs = computed(() => {
+    return {
+      ref: chartContainerNode,
+      id: `chart-container--${getId}`,
+      class: chartSlotRecipe().chartContainer,
+      style: {
+        width: widthContainer.value,
+        height: heightContainer.value
+      }
+    };
+  });
+  const canvasContainerAttrs = computed(() => {
+    return {
+      id: `canvas-container--${getId}`,
+      class: chartSlotRecipe().canvasContainer,
+      style: {
+        width: widthChart.value,
+        height: heightChart.value
+      }
+    };
+  });
+  const canvasAttrs = computed(() => {
+    return {
+      ref: chartCanvasNode,
+      id: `canvas-${getId}`,
+      ariaLabel: `Piel Chart ${title.value}`,
+      role: "img"
+    };
+  });
+  const chartLegendAttrs = computed(() => {
+    return {
+      ref: chartLegendNode,
+      id: `chart-legend--${getId}`,
+      class: chartSlotRecipe().chartLegend,
+      style: {
+        justifyContent: getLegendDirection.value,
+        marginTop: legendPosition.value === "bottom" ? token("spacing.4") : "0",
+        marginBottom: legendPosition.value === "top" ? token("spacing.4") : "0"
+      }
+    };
+  });
+  const legendWrapperAttrs = /* @__PURE__ */ __name((item, index) => {
+    return {
+      key: index,
+      class: chartSlotRecipe().legendWrapper,
+      onClick: () => handleClickLegend(item)
+    };
+  }, "legendWrapperAttrs");
+  const legendBoxAttrs = /* @__PURE__ */ __name((item) => {
+    return {
+      class: chartSlotRecipe().legendBox,
+      style: {
+        width: token("sizes.3"),
+        height: token("sizes.3"),
+        background: item.fillStyle
+      }
+    };
+  }, "legendBoxAttrs");
+  const chartTooltipAttrs = computed(() => {
+    return {
+      class: chartSlotRecipe().chartTooltip,
+      style: {
+        top: `${tooltip.value.top}px`,
+        left: `${tooltip.value.left}px`,
+        opacity: tooltip.value.opacity
+      }
+    };
+  });
+  const tooltipWrapperAttrs = computed(() => {
+    return {
+      class: chartSlotRecipe().tooltipWrapper
+    };
+  });
+  const tooltipRowAttrs = computed(() => {
+    return {
+      class: chartSlotRecipe().tooltipRow
+    };
+  });
+  const tooltipItemAttrs = computed(() => {
+    return {
+      class: chartSlotRecipe().tooltipItem
+    };
+  });
+  const tooltipBoxAttrs = computed(() => {
+    var _a, _b, _c, _d;
+    return {
+      class: chartSlotRecipe().tooltipBox,
+      style: {
+        backgroundColor: type.value === "line" ? (_b = (_a = tooltip.value.data) == null ? void 0 : _a.labelColors[0]) == null ? void 0 : _b.borderColor : (_d = (_c = tooltip.value.data) == null ? void 0 : _c.labelColors[0]) == null ? void 0 : _d.backgroundColor
+      }
+    };
+  });
+  function createChart() {
+    if (!chartCanvasNode.value)
+      return;
+    chart.value = new Chart(chartCanvasNode.value, {
+      type: type.value,
+      data: {
+        labels: typeof data.value.labels === "undefined" ? [] : [...data.value.labels],
+        datasets: getDataset.value
+      },
+      options: getOptions.value,
+      plugins: [ChartDataLabels, handleExternalLegend(), hoverBackgroundColors(), gaugeChartPointer()]
+    });
+    if (isDebug.value) {
+      console.log(`[MpChart] The context chart of ${getId} is:`, chart.value);
+    }
+  }
+  __name(createChart, "createChart");
+  function destroyChart() {
+    var _a;
+    (_a = chart.value) == null ? void 0 : _a.destroy();
+  }
+  __name(destroyChart, "destroyChart");
+  function updateChart() {
+    destroyChart();
+    createChart();
+  }
+  __name(updateChart, "updateChart");
+  function handleExternalTooltip(context) {
+    const {
+      tooltip: tooltipCtx
+    } = context;
+    const legendHeight = chartLegendNode.value ? chartLegendNode.value.clientHeight + 16 : tooltipMarginTop.value;
+    const extendTopValue = legendPosition.value === "top" ? legendHeight.value : 0;
+    const legendWidth = chartLegendNode.value ? chartLegendNode.value.clientWidth : tooltipMarginLeft.value;
+    const extendLeftValue = legendPosition.value === "left" ? legendWidth.value : 0;
+    const tooltipLeftPosition = tooltipCtx.x - chartContainerNode.value.scrollLeft;
+    const tooltipTopPosition = tooltipCtx.y > chartContainerNode.value.scrollTop ? tooltipCtx.caretY - chartContainerNode.value.scrollTop : tooltipCtx.caretY;
+    if (tooltipCtx.opacity === 1) {
+      tooltip.value = {
+        opacity: tooltipCtx.opacity,
+        left: tooltipLeftPosition + extendLeftValue + tooltipOptions.value.offsetLeft,
+        top: tooltipTopPosition + extendTopValue + tooltipOptions.value.offsetTop,
+        data: tooltipCtx
+      };
+      emit("show-tooltip", context);
+    } else {
+      tooltip.value.opacity = 0;
+      emit("hide-tooltip", context);
+    }
+    if (isDebug.value) {
+      console.log(`[MpChart] The context tooltip of ${getId} is:`, tooltip.value);
+    }
+  }
+  __name(handleExternalTooltip, "handleExternalTooltip");
+  function gaugeChartPointer() {
+    return {
+      id: "gaugeChartPointer",
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      afterDatasetsDraw(chart2, args, options2) {
+        const {
+          ctx,
+          data: data2
+        } = chart2;
+        const pointerIndexStart = options2.pointerIndexStart || 1;
+        const xCenter = chart2.getDatasetMeta(0).data[pointerIndexStart].x;
+        const yCenter = chart2.getDatasetMeta(0).data[pointerIndexStart].y;
+        const innerRadius = chart2.getDatasetMeta(0).data[pointerIndexStart].innerRadius;
+        const outerRadius = chart2.getDatasetMeta(0).data[pointerIndexStart].outerRadius;
+        const circumference = chart2.getDatasetMeta(0).data[pointerIndexStart].circumference;
+        const halfCircle = circumference / Math.PI / data2.datasets[0].data[pointerIndexStart];
+        const pointerRadius = outerRadius - innerRadius - 10;
+        const pointerColor = options2.pointerColor || "black";
+        const pointerValue = options2.pointerValue || 1;
+        const pointerRatio = options2.pointerRatio || 1.47;
+        const pointerPosition = halfCircle * pointerValue;
+        const pointerAngle = Math.PI * (pointerPosition + pointerRatio);
+        ctx.save();
+        ctx.translate(xCenter, yCenter);
+        ctx.rotate(pointerAngle);
+        ctx.beginPath();
+        ctx.strokeStyle = "white";
+        ctx.fillStyle = pointerColor;
+        ctx.lineWidth = 8;
+        ctx.shadowColor = "rgba(0, 0, 0, 0.08)";
+        ctx.shadowBlur = 8;
+        ctx.shadowOffsetX = 6;
+        ctx.shadowOffsetY = 6;
+        ctx.beginPath();
+        ctx.roundRect(0, -outerRadius + 6, pointerRadius, pointerRadius, 100);
+        ctx.fill();
+        ctx.stroke();
+        ctx.restore();
+      }
+    };
+  }
+  __name(gaugeChartPointer, "gaugeChartPointer");
+  function hoverBackgroundColors() {
+    return {
+      id: "PluginHoverBackgroundColors",
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      beforeDatasetsDraw(chart2) {
+        const {
+          ctx,
+          tooltip: tooltip2,
+          chartArea: {
+            top,
+            height
+          },
+          scales: {
+            x
+          }
+        } = chart2;
+        if (tooltip2._active[0]) {
+          const index = tooltip2._active[0].index;
+          const leftStart = x._gridLineItems[index + 1] ? x._gridLineItems[index + 1].x1 : 0;
+          const newWidth = x._gridLineItems[0].x1 - x._gridLineItems[1].x1;
+          ctx.fillStyle = "rgba(236, 240, 242, 0.6)";
+          ctx.fillRect(leftStart, top, newWidth, height);
+        }
+      }
+    };
+  }
+  __name(hoverBackgroundColors, "hoverBackgroundColors");
+  function handleExternalLegend() {
+    return {
+      id: "PluginHtmlLegend",
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      afterUpdate(chart2) {
+        var _a, _b, _c, _d;
+        const items = (_d = (_c = (_b = (_a = chart2 == null ? void 0 : chart2.options) == null ? void 0 : _a.plugins) == null ? void 0 : _b.legend) == null ? void 0 : _c.labels) == null ? void 0 : _d.generateLabels(chart2);
+        items.forEach((item) => {
+          item.chart = chart2;
+          item.click = () => {
+            if (isCircularChart.value) {
+              chart2.toggleDataVisibility(item.index);
+            } else {
+              chart2.setDatasetVisibility(item.datasetIndex, !chart2.isDatasetVisible(item.datasetIndex));
+            }
+            chart2.update();
+          };
+        });
+        legend.value = items;
+        if (isDebug.value) {
+          console.log(`[MpChart] The context legend of ${getId} is:`, legend.value);
+        }
+      }
+    };
+  }
+  __name(handleExternalLegend, "handleExternalLegend");
+  function handleColorPattern(idx, isFading) {
+    let color = "";
+    const startIndex = colorStart.value - 1;
+    const indexColors = Object.keys(getListColors.value);
+    const odds = indexColors.filter((number) => {
+      return Number(number) % 2 !== 0;
+    });
+    if (colorPattern.value === "") {
+      color = getListColors.value[Number(indexColors[startIndex + idx])];
+    }
+    if (colorPattern.value === "categorical") {
+      const oddsLength = odds.length - startIndex;
+      if (idx < oddsLength) {
+        color = getListColors.value[Number(odds[startIndex + idx])];
+      } else {
+        const multiplier = Math.floor(idx / oddsLength);
+        const darkenRatio = (colorRatio.value * multiplier).toFixed(1);
+        baseColor.value = getListColors.value[Number(odds[startIndex + idx - oddsLength * multiplier])];
+        color = Color(baseColor.value).darken(Number(darkenRatio)).hex();
+      }
+    }
+    if (colorPattern.value === "comparison") {
+      color = getListColors.value[Number(indexColors[startIndex + idx])];
+    }
+    if (colorPattern.value === "dark-shades" || colorPattern.value === "light-shades") {
+      if (idx === 0) {
+        color = getListColors.value[Number(indexColors[startIndex])];
+      } else {
+        if (colorPattern.value === "dark-shades") {
+          color = Color(baseColor.value).darken(colorRatio.value).hex();
+        }
+        if (colorPattern.value === "light-shades") {
+          color = Color(baseColor.value).lighten(colorRatio.value).hex();
+        }
+      }
+      baseColor.value = color;
+    }
+    color = isFading ? Color(color).fade(0.5).string() : color;
+    return color;
+  }
+  __name(handleColorPattern, "handleColorPattern");
+  function handleClickLegend(item) {
+    item.click();
+    emit("click-legend", item);
+  }
+  __name(handleClickLegend, "handleClickLegend");
+  watch([() => data.value, () => options.value, () => type.value], ([newData, newOptions, newType]) => {
+    if (newData || newOptions || newType) {
+      updateChart();
+    }
+  }, {
+    deep: true
+  });
+  onMounted(() => {
+    createChart();
+    chartContainerNode.value.scrollTo(0, chartContainerNode.value.scrollHeight);
+  });
+  onUnmounted(() => {
+    destroyChart();
+  });
+  return {
+    rootAttrs,
+    chartHeaderAttrs,
+    chartWrapperAttrs,
+    chartContainerAttrs,
+    canvasContainerAttrs,
+    canvasAttrs,
+    chartLegendAttrs,
+    legendWrapperAttrs,
+    legendBoxAttrs,
+    chartTooltipAttrs,
+    tooltipWrapperAttrs,
+    tooltipRowAttrs,
+    tooltipItemAttrs,
+    tooltipBoxAttrs,
+    chart,
+    legend,
+    tooltip
+  };
+}
+__name(useChart, "useChart");
+
+export {
+  useChart
+};

package/dist/chunk-QZ7VFGWC.mjs

@@ -0,0 +1,6 @@
+var __defProp = Object.defineProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+
+export {
+  __name
+};