appmax-client-vue3 5.0.5 → 5.0.6

package/dist/OrdersChartDataContent-ePGVSzaT.js

@@ -0,0 +1,221 @@
+import { ab as defineComponent, e as computed, g as createElementBlock, h as openBlock, l as unref, i as createVNode, y, w as withCtx, m as createTextVNode, t as toDisplayString, j as createBaseVNode, D as normalizeProps, N as guardReactiveProps, S as normalizeStyle, _ as _export_sfc } from "./main-ByGSHXk8.js";
+import { s as script } from "./index-BjIAV-_B.js";
+import { v as v4 } from "./v4-CQle4GE4.js";
+const _hoisted_1$1 = ["id"];
+const _sfc_main$1 = /* @__PURE__ */ defineComponent({
+  __name: "Chart",
+  props: {
+    title: {
+      type: String,
+      default: ""
+    },
+    description: {
+      type: String,
+      default: ""
+    },
+    value: {
+      type: Array,
+      default: () => []
+    },
+    backgroundColor: {
+      type: String,
+      default: "#a7dfc5"
+    },
+    currency: {
+      type: String,
+      default: "BRL"
+    },
+    width: { type: Number, default: 100 },
+    height: { type: Number, default: 300 },
+    toolTipLabel: { type: String, default: "" },
+    xAxisKey: { type: String, default: "date" },
+    yAxisKey: { type: String, default: "amount" },
+    xAxisFontSize: { type: Number, default: 12 },
+    xAxisFontWeight: { type: Number, default: 400 },
+    xAxisFontFamily: { type: String, default: "Sarabun" },
+    xAxisFontColor: { type: String, default: "#535d73" },
+    xLabelCallback: {
+      type: Function,
+      default: (value) => value
+    },
+    yAxisFontSize: { type: Number, default: 12 },
+    yAxisFontWeight: { type: Number, default: 400 },
+    yAxisFontFamily: { type: String, default: "Sarabun" },
+    yAxisFontColor: { type: String, default: "#535d73" },
+    yLabelCallback: {
+      type: Function,
+      default: (value) => value
+    },
+    gridLinesColor: { type: String, default: "#ccd7eb" },
+    chartTitleText: { type: String, default: "" },
+    chartTitleAlign: { type: String, default: "start" },
+    chartTitleColor: { type: String, default: "#B2B2B2" },
+    chartTitleFontSize: { type: Number, default: 16 },
+    chartTitleFontFamily: { type: String, default: "Sarabun" },
+    chartTitleFontWeight: { type: Number, default: 400 }
+  },
+  setup(__props) {
+    const props = __props;
+    const chartId = (props == null ? void 0 : props._id) || `am-chart-${v4()}`;
+    const chartData = computed(() => ({
+      labels: props.value.map((item) => item[props.xAxisKey]),
+      datasets: [
+        {
+          label: props.toolTipLabel,
+          backgroundColor: props.backgroundColor,
+          data: props.value.map((item) => item[props.yAxisKey])
+        }
+      ]
+    }));
+    const chartOptions = computed(() => ({
+      responsive: true,
+      maintainAspectRatio: false,
+      plugins: {
+        title: {
+          display: !!props.chartTitleText,
+          text: props.chartTitleText,
+          color: props.chartTitleColor,
+          align: props.chartTitleAlign,
+          font: {
+            family: props.chartTitleFontFamily,
+            size: props.chartTitleFontSize,
+            weight: props.chartTitleFontWeight
+          },
+          padding: { top: 10, bottom: 20 }
+        },
+        legend: { display: false },
+        tooltip: {
+          displayColors: false,
+          callbacks: {
+            label: (context) => {
+              return new Intl.NumberFormat("pt-BR", {
+                style: "currency",
+                currency: props.currency
+              }).format(context.raw);
+            },
+            title: (context) => context[0].label || ""
+          }
+        }
+      },
+      scales: {
+        x: {
+          ticks: {
+            callback: props.xLabelCallback,
+            font: {
+              family: props.xAxisFontFamily,
+              size: props.xAxisFontSize,
+              weight: props.xAxisFontWeight
+            },
+            color: props.xAxisFontColor
+          },
+          grid: { display: false }
+        },
+        y: {
+          ticks: {
+            callback: props.yLabelCallback,
+            font: {
+              family: props.yAxisFontFamily,
+              size: props.yAxisFontSize,
+              weight: props.yAxisFontWeight
+            },
+            color: props.yAxisFontColor
+          },
+          grid: {
+            color: props.gridLinesColor,
+            drawBorder: false
+          }
+        }
+      }
+    }));
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", { id: unref(chartId) }, [
+        createVNode(unref(y), null, {
+          default: withCtx(() => [
+            createTextVNode(toDisplayString(__props.title), 1)
+          ]),
+          _: 1
+        }),
+        createVNode(unref(y), null, {
+          default: withCtx(() => [
+            createTextVNode(toDisplayString(__props.description), 1)
+          ]),
+          _: 1
+        }),
+        createVNode(unref(script), {
+          type: "bar",
+          data: chartData.value,
+          options: chartOptions.value,
+          width: __props.width,
+          height: __props.height
+        }, null, 8, ["data", "options", "width", "height"])
+      ], 8, _hoisted_1$1);
+    };
+  }
+});
+const _hoisted_1 = ["data-test"];
+const _hoisted_2 = ["data-test"];
+const TEXT_COLOR = "#707070";
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "OrdersChartDataContent",
+  props: {
+    id: {},
+    title: {},
+    currency: {},
+    items: {}
+  },
+  setup(__props) {
+    const props = __props;
+    const minWidth = computed(() => {
+      const total = props.items.length;
+      const WIDTH_BAR = 40;
+      const WIDTH_SPACES = 100;
+      const value = total * WIDTH_BAR + WIDTH_SPACES;
+      return `${value}px`;
+    });
+    const chartData = computed(() => ({
+      chartTitleFontSize: 12,
+      value: props.items,
+      currency: props.currency,
+      height: 235,
+      backgroundColor: "rgba(155, 106, 250, .6)",
+      xAxisKey: "date",
+      xAxisDisplay: true,
+      xAxisFontColor: TEXT_COLOR,
+      xLabelCallback: (index) => {
+        const item = props.items[index];
+        return item.date.replace(/\/\d{4}/, "");
+      },
+      yAxisKey: "amount",
+      yAxisFontSize: 12,
+      yAxisFontWeight: 400,
+      yAxisFontColor: TEXT_COLOR
+    }));
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", {
+        class: "dashboard-orders-chart-data-content",
+        "data-test": `${_ctx.id}-content`
+      }, [
+        createBaseVNode("div", {
+          style: normalizeStyle({ minWidth: minWidth.value }),
+          "data-test": `${_ctx.id}-wrapper-content`
+        }, [
+          createVNode(unref(y), {
+            class: "text-muted-color mb-2",
+            isStrong: "",
+            "data-test": `${_ctx.id}-label`
+          }, {
+            default: withCtx(() => [
+              createTextVNode(toDisplayString(_ctx.title), 1)
+            ]),
+            _: 1
+          }, 8, ["data-test"]),
+          createVNode(_sfc_main$1, normalizeProps(guardReactiveProps(chartData.value)), null, 16)
+        ], 12, _hoisted_2)
+      ], 8, _hoisted_1);
+    };
+  }
+});
+const OrdersChartDataContent = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-676230ba"]]);
+export {
+  OrdersChartDataContent as default
+};