vue-chrts 0.0.45 → 0.0.47

package/dist/index.js

@@ -0,0 +1,318 @@
+import { defineComponent, computed, ref, resolveComponent, mergeProps, unref, withCtx, createBlock, createCommentVNode, renderSlot, openBlock, createVNode, Fragment, renderList, useSSRContext } from "vue";
+import { ssrRenderAttrs, ssrRenderComponent, ssrRenderList, ssrRenderAttr, ssrRenderSlot } from "vue/server-renderer";
+import { CurveType, Area, Line, Axis } from "@unovis/ts";
+import { VisXYContainer, VisArea, VisLine, VisAxis } from "@unovis/vue";
+import { useMounted } from "@vueuse/core";
+const _sfc_main$1 = /* @__PURE__ */ defineComponent({
+  __name: "Area",
+  __ssrInlineRender: true,
+  props: {
+    data: {},
+    categories: {},
+    index: {},
+    colors: {},
+    margin: { default: () => ({ top: 0, bottom: 0, left: 0, right: 0 }) },
+    filterOpacity: { default: 0.2 },
+    xFormatter: {},
+    yFormatter: {},
+    showXAxis: { type: Boolean, default: true },
+    showYAxis: { type: Boolean, default: true },
+    showTooltip: { type: Boolean, default: true },
+    showLegend: { type: Boolean, default: true },
+    showGridLine: { type: Boolean, default: true },
+    customTooltip: {},
+    curveType: { default: CurveType.MonotoneX },
+    showGradiant: { type: Boolean, default: true }
+  },
+  emits: ["legendItemClick"],
+  setup(__props, { emit: __emit }) {
+    function defaultColors(count = 3) {
+      const quotient = Math.floor(count / 2);
+      const remainder = count % 2;
+      const primaryCount = quotient + remainder;
+      const secondaryCount = quotient;
+      return [
+        ...Array.from(new Array(primaryCount).keys()).map((i) => `hsl(var(--vis-primary-color) / ${1 - 1 / primaryCount * i})`),
+        ...Array.from(new Array(secondaryCount).keys()).map((i) => `hsl(var(--vis-secondary-color) / ${1 - 1 / secondaryCount * i})`)
+      ];
+    }
+    const props = __props;
+    const emits = __emit;
+    const index = computed(() => props.index);
+    const colors = computed(() => {
+      var _a;
+      return ((_a = props.colors) == null ? void 0 : _a.length) ? props.colors : defaultColors(props.categories.length);
+    });
+    const legendItems = ref(props.categories.map((category, i) => ({
+      name: category,
+      color: colors.value[i],
+      inactive: false
+    })));
+    const isMounted = useMounted();
+    function handleLegendItemClick(d, i) {
+      emits("legendItemClick", d, i);
+    }
+    return (_ctx, _push, _parent, _attrs) => {
+      const _component_ChartLegend = resolveComponent("ChartLegend");
+      const _component_ChartCrosshair = resolveComponent("ChartCrosshair");
+      _push(`<div${ssrRenderAttrs(mergeProps({ class: "w-full h-[400px] flex flex-col items-end" }, _attrs))}>`);
+      if (_ctx.showLegend) {
+        _push(ssrRenderComponent(_component_ChartLegend, {
+          items: legendItems.value,
+          "onUpdate:items": ($event) => legendItems.value = $event,
+          onLegendItemClick: handleLegendItemClick
+        }, null, _parent));
+      } else {
+        _push(`<!---->`);
+      }
+      _push(ssrRenderComponent(unref(VisXYContainer), {
+        style: { height: unref(isMounted) ? "100%" : "auto" },
+        margin: { left: 20, right: 20 },
+        data: _ctx.data
+      }, {
+        default: withCtx((_, _push2, _parent2, _scopeId) => {
+          if (_push2) {
+            _push2(`<svg width="0" height="0"${_scopeId}><defs${_scopeId}><!--[-->`);
+            ssrRenderList(colors.value, (color, i) => {
+              _push2(`<linearGradient x1="0" y1="0" x2="0" y2="1"${_scopeId}>`);
+              if (_ctx.showGradiant) {
+                _push2(`<!--[--><stop offset="5%"${ssrRenderAttr("stop-color", color)} stop-opacity="0.4"${_scopeId}></stop><stop offset="95%"${ssrRenderAttr("stop-color", color)} stop-opacity="0"${_scopeId}></stop><!--]-->`);
+              } else {
+                _push2(`<stop offset="0%"${ssrRenderAttr("stop-color", color)}${_scopeId}></stop>`);
+              }
+              _push2(`</linearGradient>`);
+            });
+            _push2(`<!--]--></defs></svg>`);
+            if (_ctx.showTooltip) {
+              _push2(ssrRenderComponent(_component_ChartCrosshair, {
+                colors: colors.value,
+                items: legendItems.value,
+                index: index.value,
+                "custom-tooltip": _ctx.customTooltip
+              }, null, _parent2, _scopeId));
+            } else {
+              _push2(`<!---->`);
+            }
+            _push2(`<!--[-->`);
+            ssrRenderList(_ctx.categories, (category) => {
+              var _a;
+              _push2(ssrRenderComponent(unref(VisArea), {
+                x: (_2, i) => i,
+                y: (d) => d[category],
+                color: "auto",
+                "curve-type": _ctx.curveType,
+                attributes: {
+                  [unref(Area).selectors.area]: {
+                    fill: ``
+                  }
+                },
+                opacity: ((_a = legendItems.value.find((item) => item.name === category)) == null ? void 0 : _a.inactive) ? _ctx.filterOpacity : 1
+              }, null, _parent2, _scopeId));
+            });
+            _push2(`<!--]--><!--[-->`);
+            ssrRenderList(_ctx.categories, (category, i) => {
+              var _a;
+              _push2(ssrRenderComponent(unref(VisLine), {
+                x: (_2, i2) => i2,
+                y: (d) => d[category],
+                color: colors.value[i],
+                "curve-type": _ctx.curveType,
+                attributes: {
+                  [unref(Line).selectors.line]: {
+                    opacity: ((_a = legendItems.value.find((item) => item.name === category)) == null ? void 0 : _a.inactive) ? _ctx.filterOpacity : 1
+                  }
+                }
+              }, null, _parent2, _scopeId));
+            });
+            _push2(`<!--]-->`);
+            if (_ctx.showXAxis) {
+              _push2(ssrRenderComponent(unref(VisAxis), {
+                type: "x",
+                "tick-format": _ctx.xFormatter ?? ((v) => {
+                  var _a;
+                  return (_a = _ctx.data[v]) == null ? void 0 : _a[index.value];
+                }),
+                "grid-line": false,
+                "tick-line": false,
+                "tick-text-color": "hsl(var(--vis-text-color))"
+              }, null, _parent2, _scopeId));
+            } else {
+              _push2(`<!---->`);
+            }
+            if (_ctx.showYAxis) {
+              _push2(ssrRenderComponent(unref(VisAxis), {
+                type: "y",
+                "tick-line": false,
+                "tick-format": _ctx.yFormatter,
+                "domain-line": false,
+                "grid-line": _ctx.showGridLine,
+                attributes: {
+                  [unref(Axis).selectors.grid]: {
+                    class: "text-muted"
+                  }
+                },
+                "tick-text-color": "hsl(var(--vis-text-color))"
+              }, null, _parent2, _scopeId));
+            } else {
+              _push2(`<!---->`);
+            }
+            ssrRenderSlot(_ctx.$slots, "default", {}, null, _push2, _parent2, _scopeId);
+          } else {
+            return [
+              (openBlock(), createBlock("svg", {
+                width: "0",
+                height: "0"
+              }, [
+                createVNode("defs", null, [
+                  (openBlock(true), createBlock(Fragment, null, renderList(colors.value, (color, i) => {
+                    return openBlock(), createBlock("linearGradient", {
+                      key: i,
+                      x1: "0",
+                      y1: "0",
+                      x2: "0",
+                      y2: "1"
+                    }, [
+                      _ctx.showGradiant ? (openBlock(), createBlock(Fragment, { key: 0 }, [
+                        createVNode("stop", {
+                          offset: "5%",
+                          "stop-color": color,
+                          "stop-opacity": "0.4"
+                        }, null, 8, ["stop-color"]),
+                        createVNode("stop", {
+                          offset: "95%",
+                          "stop-color": color,
+                          "stop-opacity": "0"
+                        }, null, 8, ["stop-color"])
+                      ], 64)) : (openBlock(), createBlock("stop", {
+                        key: 1,
+                        offset: "0%",
+                        "stop-color": color
+                      }, null, 8, ["stop-color"]))
+                    ]);
+                  }), 128))
+                ])
+              ])),
+              _ctx.showTooltip ? (openBlock(), createBlock(_component_ChartCrosshair, {
+                key: 0,
+                colors: colors.value,
+                items: legendItems.value,
+                index: index.value,
+                "custom-tooltip": _ctx.customTooltip
+              }, null, 8, ["colors", "items", "index", "custom-tooltip"])) : createCommentVNode("", true),
+              (openBlock(true), createBlock(Fragment, null, renderList(_ctx.categories, (category) => {
+                var _a;
+                return openBlock(), createBlock(unref(VisArea), {
+                  key: category,
+                  x: (_2, i) => i,
+                  y: (d) => d[category],
+                  color: "auto",
+                  "curve-type": _ctx.curveType,
+                  attributes: {
+                    [unref(Area).selectors.area]: {
+                      fill: ``
+                    }
+                  },
+                  opacity: ((_a = legendItems.value.find((item) => item.name === category)) == null ? void 0 : _a.inactive) ? _ctx.filterOpacity : 1
+                }, null, 8, ["x", "y", "curve-type", "attributes", "opacity"]);
+              }), 128)),
+              (openBlock(true), createBlock(Fragment, null, renderList(_ctx.categories, (category, i) => {
+                var _a;
+                return openBlock(), createBlock(unref(VisLine), {
+                  key: category,
+                  x: (_2, i2) => i2,
+                  y: (d) => d[category],
+                  color: colors.value[i],
+                  "curve-type": _ctx.curveType,
+                  attributes: {
+                    [unref(Line).selectors.line]: {
+                      opacity: ((_a = legendItems.value.find((item) => item.name === category)) == null ? void 0 : _a.inactive) ? _ctx.filterOpacity : 1
+                    }
+                  }
+                }, null, 8, ["x", "y", "color", "curve-type", "attributes"]);
+              }), 128)),
+              _ctx.showXAxis ? (openBlock(), createBlock(unref(VisAxis), {
+                key: 1,
+                type: "x",
+                "tick-format": _ctx.xFormatter ?? ((v) => {
+                  var _a;
+                  return (_a = _ctx.data[v]) == null ? void 0 : _a[index.value];
+                }),
+                "grid-line": false,
+                "tick-line": false,
+                "tick-text-color": "hsl(var(--vis-text-color))"
+              }, null, 8, ["tick-format"])) : createCommentVNode("", true),
+              _ctx.showYAxis ? (openBlock(), createBlock(unref(VisAxis), {
+                key: 2,
+                type: "y",
+                "tick-line": false,
+                "tick-format": _ctx.yFormatter,
+                "domain-line": false,
+                "grid-line": _ctx.showGridLine,
+                attributes: {
+                  [unref(Axis).selectors.grid]: {
+                    class: "text-muted"
+                  }
+                },
+                "tick-text-color": "hsl(var(--vis-text-color))"
+              }, null, 8, ["tick-format", "grid-line", "attributes"])) : createCommentVNode("", true),
+              renderSlot(_ctx.$slots, "default")
+            ];
+          }
+        }),
+        _: 3
+      }, _parent));
+      _push(`</div>`);
+    };
+  }
+});
+const _sfc_setup$1 = _sfc_main$1.setup;
+_sfc_main$1.setup = (props, ctx) => {
+  const ssrContext = useSSRContext();
+  (ssrContext.modules || (ssrContext.modules = /* @__PURE__ */ new Set())).add("src/components/Area/Area.vue");
+  return _sfc_setup$1 ? _sfc_setup$1(props, ctx) : void 0;
+};
+var PaginationPosition = /* @__PURE__ */ ((PaginationPosition2) => {
+  PaginationPosition2["Top"] = "top";
+  PaginationPosition2["Bottom"] = "bottom";
+  return PaginationPosition2;
+})(PaginationPosition || {});
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "Button",
+  __ssrInlineRender: true,
+  props: {
+    variant: {},
+    size: {}
+  },
+  setup(__props) {
+    return (_ctx, _push, _parent, _attrs) => {
+      _push(`<button${ssrRenderAttrs(mergeProps({
+        class: [
+          "button",
+          `button--${_ctx.variant || "primary"}`,
+          `button--${_ctx.size || "medium"}`
+        ]
+      }, _attrs))} data-v-52b6ec0c>`);
+      ssrRenderSlot(_ctx.$slots, "default", {}, null, _push, _parent);
+      _push(`</button>`);
+    };
+  }
+});
+const _export_sfc = (sfc, props) => {
+  const target = sfc.__vccOpts || sfc;
+  for (const [key, val] of props) {
+    target[key] = val;
+  }
+  return target;
+};
+const _sfc_setup = _sfc_main.setup;
+_sfc_main.setup = (props, ctx) => {
+  const ssrContext = useSSRContext();
+  (ssrContext.modules || (ssrContext.modules = /* @__PURE__ */ new Set())).add("src/components/Button/Button.vue");
+  return _sfc_setup ? _sfc_setup(props, ctx) : void 0;
+};
+const Button = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-52b6ec0c"]]);
+export {
+  _sfc_main$1 as Area,
+  Button,
+  PaginationPosition
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue-chrts",
-  "version": "0.0.45",
+  "version": "0.0.47",
   "type": "module",
   "files": [
     "dist"