@mekari/pixel3-chart 0.0.1-dev.0

package/dist/chart.js

@@ -0,0 +1,866 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/chart.tsx
+var chart_exports = {};
+__export(chart_exports, {
+  MpChart: () => MpChart
+});
+module.exports = __toCommonJS(chart_exports);
+var import_vue2 = require("vue");
+var import_vue3 = require("vue");
+var import_pixel3_text = require("@mekari/pixel3-text");
+
+// src/modules/chart.props.ts
+var chartProps = {
+  id: {
+    type: String,
+    default: ""
+  },
+  title: {
+    type: String,
+    default: ""
+  },
+  type: {
+    type: String,
+    default: "bar"
+  },
+  widthChart: {
+    type: String,
+    default: "100%"
+  },
+  heightChart: {
+    type: String,
+    default: "256px"
+  },
+  widthContainer: {
+    type: String,
+    default: "100%"
+  },
+  heightContainer: {
+    type: String,
+    default: "100%"
+  },
+  data: {
+    type: Object,
+    default: () => {
+      return {
+        labels: "",
+        dataSets: []
+      };
+    }
+  },
+  options: {
+    type: Object,
+    default: () => {
+    }
+  },
+  colorPattern: {
+    type: String,
+    default: "categorical"
+  },
+  colorStart: {
+    type: Number,
+    default: 1
+  },
+  colorRatio: {
+    type: Number,
+    default: 0.2
+  },
+  legendPosition: {
+    type: String,
+    default: "bottom"
+  },
+  legendDirection: {
+    type: String,
+    default: "left"
+  },
+  tooltipMarginTop: {
+    type: Number,
+    default: 0
+  },
+  tooltipMarginLeft: {
+    type: Number,
+    default: 0
+  },
+  tooltipOptions: {
+    type: Object,
+    default: () => {
+      return {
+        offsetTop: 0,
+        offsetLeft: 0
+      };
+    }
+  },
+  isShowLegend: {
+    type: Boolean,
+    default: true
+  },
+  isShowTooltip: {
+    type: Boolean,
+    default: true
+  },
+  isShowDataLabels: {
+    type: Boolean,
+    default: false
+  },
+  isHorizontal: {
+    type: Boolean,
+    default: false
+  },
+  isStacked: {
+    type: Boolean,
+    default: false
+  },
+  isArea: {
+    type: Boolean,
+    default: false
+  },
+  isDebug: {
+    type: Boolean,
+    default: false
+  },
+  isShowBackgroundHover: {
+    type: Boolean,
+    default: false
+  },
+  isShowGaugePointer: {
+    type: Boolean,
+    default: false
+  },
+  isMixedChart: {
+    type: Boolean,
+    default: false
+  }
+};
+
+// src/modules/chart.hooks.ts
+var import_vue = require("vue");
+var import_pixel3_utils = require("@mekari/pixel3-utils");
+var import_recipes = require("@mekari/pixel3-styled-system/recipes");
+var import_tokens = require("@mekari/pixel3-styled-system/tokens");
+var import_lodash_es = require("lodash-es");
+var import_color = __toESM(require("color"));
+var import_auto = __toESM(require("chart.js/auto"));
+var import_chartjs_plugin_datalabels = __toESM(require("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
+  } = (0, import_vue.toRefs)(props);
+  const chart = (0, import_vue.shallowRef)(null);
+  const tooltip = (0, import_vue.ref)({
+    top: 0,
+    left: 0,
+    opacity: 0,
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    data: null
+  });
+  const legend = (0, import_vue.ref)([]);
+  const baseColor = (0, import_vue.ref)();
+  const chartContainerNode = (0, import_vue.ref)();
+  const chartLegendNode = (0, import_vue.ref)();
+  const chartCanvasNode = (0, import_vue.ref)();
+  const getId = id.value || (0, import_pixel3_utils.getUniqueId)("", "chart").value;
+  const isHorizontalBarChart = (0, import_vue.computed)(() => {
+    return type.value === "bar" && isHorizontal.value;
+  });
+  const isCircularChart = (0, import_vue.computed)(() => {
+    return type.value === "pie" || type.value === "doughnut";
+  });
+  const getLegendPosition = (0, import_vue.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 = (0, import_vue.computed)(() => {
+    let direction = "flex-start";
+    if (legendDirection.value === "center") {
+      direction = "center";
+    }
+    if (legendDirection.value === "right") {
+      direction = "flex-end";
+    }
+    return direction;
+  });
+  const getOptions = (0, import_vue.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 (0, import_lodash_es.merge)(basicOptions, options.value);
+  });
+  const getDataset = (0, import_vue.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 = (0, import_vue.computed)(() => {
+    return {
+      1: (0, import_tokens.token)("colors.sky.400"),
+      2: (0, import_tokens.token)("colors.sky.100"),
+      3: (0, import_tokens.token)("colors.teal.400"),
+      4: (0, import_tokens.token)("colors.teal.100"),
+      5: (0, import_tokens.token)("colors.violet.400"),
+      6: (0, import_tokens.token)("colors.violet.100"),
+      7: (0, import_tokens.token)("colors.amber.400"),
+      8: (0, import_tokens.token)("colors.amber.100"),
+      9: (0, import_tokens.token)("colors.rose.400"),
+      10: (0, import_tokens.token)("colors.rose.100"),
+      11: (0, import_tokens.token)("colors.stone.400"),
+      12: (0, import_tokens.token)("colors.stone.100"),
+      13: (0, import_tokens.token)("colors.lime.400"),
+      14: (0, import_tokens.token)("colors.lime.100"),
+      15: (0, import_tokens.token)("colors.pink.400"),
+      16: (0, import_tokens.token)("colors.pink.100"),
+      17: (0, import_tokens.token)("colors.apricot.400"),
+      18: (0, import_tokens.token)("colors.apricot.100"),
+      19: (0, import_tokens.token)("colors.aqua.400"),
+      20: (0, import_tokens.token)("colors.aqua.100"),
+      21: (0, import_tokens.token)("colors.leaf.400"),
+      22: (0, import_tokens.token)("colors.leaf.100"),
+      23: (0, import_tokens.token)("colors.fuchsia.400"),
+      24: (0, import_tokens.token)("colors.fuchsia.100")
+    };
+  });
+  const rootAttrs = (0, import_vue.computed)(() => {
+    return {
+      "data-pixel-component": "MpChart",
+      id: getId,
+      class: (0, import_recipes.chartSlotRecipe)().root,
+      style: {
+        width: widthContainer.value
+      }
+    };
+  });
+  const chartHeaderAttrs = (0, import_vue.computed)(() => {
+    return {
+      class: (0, import_recipes.chartSlotRecipe)().chartHeader
+    };
+  });
+  const chartWrapperAttrs = (0, import_vue.computed)(() => {
+    return {
+      class: (0, import_recipes.chartSlotRecipe)().chartWrapper,
+      style: {
+        flexDirection: getLegendPosition.value
+      }
+    };
+  });
+  const chartContainerAttrs = (0, import_vue.computed)(() => {
+    return {
+      ref: chartContainerNode,
+      id: `chart-container--${getId}`,
+      class: (0, import_recipes.chartSlotRecipe)().chartContainer,
+      style: {
+        width: widthContainer.value,
+        height: heightContainer.value
+      }
+    };
+  });
+  const canvasContainerAttrs = (0, import_vue.computed)(() => {
+    return {
+      id: `canvas-container--${getId}`,
+      class: (0, import_recipes.chartSlotRecipe)().canvasContainer,
+      style: {
+        width: widthChart.value,
+        height: heightChart.value
+      }
+    };
+  });
+  const canvasAttrs = (0, import_vue.computed)(() => {
+    return {
+      ref: chartCanvasNode,
+      id: `canvas-${getId}`,
+      ariaLabel: `Piel Chart ${title.value}`,
+      role: "img"
+    };
+  });
+  const chartLegendAttrs = (0, import_vue.computed)(() => {
+    return {
+      ref: chartLegendNode,
+      id: `chart-legend--${getId}`,
+      class: (0, import_recipes.chartSlotRecipe)().chartLegend,
+      style: {
+        justifyContent: getLegendDirection.value,
+        marginTop: legendPosition.value === "bottom" ? (0, import_tokens.token)("spacing.4") : "0",
+        marginBottom: legendPosition.value === "top" ? (0, import_tokens.token)("spacing.4") : "0"
+      }
+    };
+  });
+  const legendWrapperAttrs = /* @__PURE__ */ __name((item, index) => {
+    return {
+      key: index,
+      class: (0, import_recipes.chartSlotRecipe)().legendWrapper,
+      onClick: () => handleClickLegend(item)
+    };
+  }, "legendWrapperAttrs");
+  const legendBoxAttrs = /* @__PURE__ */ __name((item) => {
+    return {
+      class: (0, import_recipes.chartSlotRecipe)().legendBox,
+      style: {
+        width: (0, import_tokens.token)("sizes.3"),
+        height: (0, import_tokens.token)("sizes.3"),
+        background: item.fillStyle
+      }
+    };
+  }, "legendBoxAttrs");
+  const chartTooltipAttrs = (0, import_vue.computed)(() => {
+    return {
+      class: (0, import_recipes.chartSlotRecipe)().chartTooltip,
+      style: {
+        top: `${tooltip.value.top}px`,
+        left: `${tooltip.value.left}px`,
+        opacity: tooltip.value.opacity
+      }
+    };
+  });
+  const tooltipWrapperAttrs = (0, import_vue.computed)(() => {
+    return {
+      class: (0, import_recipes.chartSlotRecipe)().tooltipWrapper
+    };
+  });
+  const tooltipRowAttrs = (0, import_vue.computed)(() => {
+    return {
+      class: (0, import_recipes.chartSlotRecipe)().tooltipRow
+    };
+  });
+  const tooltipItemAttrs = (0, import_vue.computed)(() => {
+    return {
+      class: (0, import_recipes.chartSlotRecipe)().tooltipItem
+    };
+  });
+  const tooltipBoxAttrs = (0, import_vue.computed)(() => {
+    var _a, _b, _c, _d;
+    return {
+      class: (0, import_recipes.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 import_auto.default(chartCanvasNode.value, {
+      type: type.value,
+      data: {
+        labels: typeof data.value.labels === "undefined" ? [] : [...data.value.labels],
+        datasets: getDataset.value
+      },
+      options: getOptions.value,
+      plugins: [import_chartjs_plugin_datalabels.default, 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 = (0, import_color.default)(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 = (0, import_color.default)(baseColor.value).darken(colorRatio.value).hex();
+        }
+        if (colorPattern.value === "light-shades") {
+          color = (0, import_color.default)(baseColor.value).lighten(colorRatio.value).hex();
+        }
+      }
+      baseColor.value = color;
+    }
+    color = isFading ? (0, import_color.default)(color).fade(0.5).string() : color;
+    return color;
+  }
+  __name(handleColorPattern, "handleColorPattern");
+  function handleClickLegend(item) {
+    item.click();
+    emit("click-legend", item);
+  }
+  __name(handleClickLegend, "handleClickLegend");
+  (0, import_vue.watch)([() => data.value, () => options.value, () => type.value], ([newData, newOptions, newType]) => {
+    if (newData || newOptions || newType) {
+      updateChart();
+    }
+  }, {
+    deep: true
+  });
+  (0, import_vue.onMounted)(() => {
+    createChart();
+    chartContainerNode.value.scrollTo(0, chartContainerNode.value.scrollHeight);
+  });
+  (0, import_vue.onUnmounted)(() => {
+    destroyChart();
+  });
+  return {
+    rootAttrs,
+    chartHeaderAttrs,
+    chartWrapperAttrs,
+    chartContainerAttrs,
+    canvasContainerAttrs,
+    canvasAttrs,
+    chartLegendAttrs,
+    legendWrapperAttrs,
+    legendBoxAttrs,
+    chartTooltipAttrs,
+    tooltipWrapperAttrs,
+    tooltipRowAttrs,
+    tooltipItemAttrs,
+    tooltipBoxAttrs,
+    chart,
+    legend,
+    tooltip
+  };
+}
+__name(useChart, "useChart");
+
+// src/chart.tsx
+var import_lodash_es2 = require("lodash-es");
+function _isSlot(s) {
+  return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !(0, import_vue2.isVNode)(s);
+}
+__name(_isSlot, "_isSlot");
+var MpChart = (0, import_vue3.defineComponent)({
+  name: "MpChart",
+  props: chartProps,
+  emits: ["show-tooltip", "hide-tooltip", "click-legend"],
+  setup(props, {
+    slots,
+    emit
+  }) {
+    const {
+      rootAttrs,
+      chartHeaderAttrs,
+      chartWrapperAttrs,
+      chartContainerAttrs,
+      canvasContainerAttrs,
+      canvasAttrs,
+      chartLegendAttrs,
+      legendWrapperAttrs,
+      legendBoxAttrs,
+      chartTooltipAttrs,
+      tooltipWrapperAttrs,
+      tooltipRowAttrs,
+      tooltipItemAttrs,
+      tooltipBoxAttrs,
+      chart,
+      legend,
+      tooltip
+    } = useChart(props, emit);
+    return () => {
+      const children = slots.default && slots.default();
+      const {
+        title,
+        isShowLegend,
+        isShowTooltip
+      } = props;
+      return (0, import_vue2.createVNode)("div", rootAttrs.value, [(title || slots.action) && (0, import_vue2.createVNode)("div", chartHeaderAttrs.value, [(0, import_vue2.createVNode)(import_pixel3_text.MpText, {
+        "size": "h2",
+        "weight": "semiBold"
+      }, _isSlot(title) ? title : {
+        default: () => [title]
+      }), slots.action && slots.action(chart.value)]), (0, import_vue2.createVNode)("div", chartWrapperAttrs.value, [(0, import_vue2.createVNode)("div", chartContainerAttrs.value, [(0, import_vue2.createVNode)("div", canvasContainerAttrs.value, [(0, import_vue2.createVNode)("canvas", canvasAttrs.value, null)]), children]), isShowLegend ? slots.legend ? slots.legend((0, import_lodash_es2.merge)(legend.value)) : (0, import_vue2.createVNode)("div", chartLegendAttrs.value, [
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        legend.value.map((item, index) => {
+          return (0, import_vue2.createVNode)("div", legendWrapperAttrs(item, index), [(0, import_vue2.createVNode)("div", legendBoxAttrs(item), null), (0, import_vue2.createVNode)(import_pixel3_text.MpText, {
+            "is-strike": item.hidden
+          }, {
+            default: () => [item.text]
+          })]);
+        })
+      ]) : "", isShowTooltip && (0, import_vue2.createVNode)("div", chartTooltipAttrs.value, [slots.tooltip ? slots.tooltip(tooltip.value.data) : (0, import_vue2.createVNode)("div", tooltipWrapperAttrs.value, [(0, import_vue2.createVNode)(import_pixel3_text.MpText, {
+        "size": "label",
+        "color": "gray.600"
+      }, {
+        default: () => {
+          var _a, _b;
+          return [(_b = (_a = tooltip.value.data) == null ? void 0 : _a.dataPoints[0]) == null ? void 0 : _b.label];
+        }
+      }), (0, import_vue2.createVNode)("div", tooltipRowAttrs.value, [(0, import_vue2.createVNode)("div", tooltipItemAttrs.value, [(0, import_vue2.createVNode)("div", tooltipBoxAttrs.value, null), (0, import_vue2.createVNode)(import_pixel3_text.MpText, {
+        "size": "label-small",
+        "weight": "semiBold"
+      }, {
+        default: () => {
+          var _a, _b;
+          return [(_b = (_a = tooltip.value.data) == null ? void 0 : _a.dataPoints[0]) == null ? void 0 : _b.dataset.label];
+        }
+      })]), (0, import_vue2.createVNode)(import_pixel3_text.MpText, {
+        "size": "label-small",
+        "color": "gray.600"
+      }, {
+        default: () => {
+          var _a, _b;
+          return [(_b = (_a = tooltip.value.data) == null ? void 0 : _a.dataPoints[0]) == null ? void 0 : _b.formattedValue];
+        }
+      })])])])])]);
+    };
+  }
+});
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  MpChart
+});