nuxt-charts 2.2.1 → 3.0.0-beta.0

package/dist/runtime/components/BarChart.vue

@@ -0,0 +1,175 @@
+<script setup>
+import { computed } from "vue";
+import { Bar, BarChart as VccsBarChart, LabelList, Rectangle } from "vccs";
+import CartesianFrame from "./internal/CartesianFrame.vue";
+import CubeBarShape from "./internal/CubeBarShape.vue";
+import {
+  categoriesToSeries,
+  PRIMARY_Y_AXIS_ID
+} from "../utils/categories";
+import {
+  DEFAULT_CUBE_EMPTY_COLOR,
+  DEFAULT_CUBE_GAP,
+  DEFAULT_CUBE_RADIUS,
+  DEFAULT_CUBE_SIZE
+} from "../utils/cubes";
+const props = defineProps({
+  yAxis: { type: Array, required: true },
+  xAxis: { type: null, required: false },
+  stacked: { type: Boolean, required: false },
+  orientation: { type: String, required: false },
+  radius: { type: Number, required: false },
+  barGap: { type: [Number, String], required: false },
+  barCategoryGap: { type: [Number, String], required: false },
+  barPadding: { type: Number, required: false },
+  groupPadding: { type: Number, required: false },
+  valueLabel: { type: Object, required: false },
+  variant: { type: String, required: false, default: "solid" },
+  cubeGap: { type: Number, required: false, default: DEFAULT_CUBE_GAP },
+  cubeRadius: { type: Number, required: false, default: DEFAULT_CUBE_RADIUS },
+  cubeSize: { type: Number, required: false, default: DEFAULT_CUBE_SIZE },
+  cubeMinSize: { type: Number, required: false },
+  cubeMinOpacity: { type: Number, required: false },
+  cubeEmptyColor: { type: String, required: false, default: DEFAULT_CUBE_EMPTY_COLOR },
+  stackAndGrouped: { type: Boolean, required: false },
+  stackedGroupedSpacing: { type: Number, required: false },
+  data: { type: Array, required: true },
+  height: { type: Number, required: true },
+  xLabel: { type: String, required: false },
+  yLabel: { type: String, required: false },
+  padding: { type: Object, required: false },
+  categories: { type: Object, required: true },
+  xFormatter: { type: Function, required: false },
+  yFormatter: { type: Function, required: false },
+  tooltipTitleFormatter: { type: Function, required: false },
+  xNumTicks: { type: Number, required: false },
+  yNumTicks: { type: Number, required: false },
+  hideLegend: { type: Boolean, required: false },
+  hideTooltip: { type: Boolean, required: false },
+  legendPosition: { type: String, required: false },
+  legendStyle: { type: [String, Object], required: false },
+  xDomainLine: { type: Boolean, required: false },
+  yDomainLine: { type: Boolean, required: false },
+  xTickLine: { type: Boolean, required: false },
+  yTickLine: { type: Boolean, required: false },
+  xGridLine: { type: Boolean, required: false },
+  yGridLine: { type: Boolean, required: false },
+  hideXAxis: { type: Boolean, required: false },
+  hideYAxis: { type: Boolean, required: false },
+  xDomain: { type: Array, required: false },
+  yDomain: { type: Array, required: false },
+  duration: { type: Number, required: false },
+  xAxisConfig: { type: Object, required: false },
+  yAxisConfig: { type: Object, required: false },
+  yAxes: { type: Object, required: false },
+  tooltip: { type: Object, required: false },
+  referenceLines: { type: Array, required: false },
+  syncId: { type: String, required: false },
+  minMaxTicksOnly: { type: Boolean, required: false },
+  xExplicitTicks: { type: Array, required: false },
+  yExplicitTicks: { type: Array, required: false },
+  crosshairConfig: { type: Object, required: false },
+  theme: { type: Object, required: false }
+});
+const isCubes = computed(() => props.variant === "cubes");
+const valueAccessor = computed(() => {
+  const fn = props.valueLabel?.label;
+  if (!fn) return void 0;
+  return (entry, index) => {
+    const y = Array.isArray(entry.value) ? entry.value[entry.value.length - 1] : entry.value;
+    return fn({ ...entry, y }, index);
+  };
+});
+const categoryByKey = computed(() => {
+  const map = /* @__PURE__ */ new Map();
+  for (const s of categoriesToSeries(props.categories)) map.set(s.dataKey, s);
+  return map;
+});
+const series = computed(
+  () => props.yAxis.map((key) => {
+    const k = String(key);
+    const cat = categoryByKey.value.get(k);
+    return {
+      dataKey: k,
+      name: cat?.name ?? k,
+      color: cat?.color,
+      hidden: cat?.hidden ?? false,
+      yAxisId: cat?.yAxisId ?? PRIMARY_Y_AXIS_ID
+    };
+  })
+);
+const stackIdFor = (yAxisId) => props.stacked ? `stack-${yAxisId}` : void 0;
+const xAxisKey = computed(() => props.xAxis !== void 0 ? String(props.xAxis) : void 0);
+const chartContainerProps = computed(() => {
+  const barGap = props.barGap ?? props.barPadding;
+  const barCategoryGap = props.barCategoryGap ?? props.groupPadding;
+  return {
+    ...barGap !== void 0 ? { barGap } : {},
+    ...barCategoryGap !== void 0 ? { barCategoryGap } : {}
+  };
+});
+function barRadius(index) {
+  const r = props.radius ?? 2;
+  if (!props.stacked) return r;
+  const isLast = index === series.value.length - 1;
+  if (props.orientation === "horizontal") {
+    return isLast ? [0, r, r, 0] : 0;
+  }
+  return isLast ? [r, r, 0, 0] : 0;
+}
+</script>
+
+<template>
+  <CartesianFrame
+    :container="VccsBarChart"
+    :x-axis-key="xAxisKey"
+    :container-props="chartContainerProps"
+    v-bind="props"
+  >
+    <Bar
+      v-for="(s, i) in series"
+      :key="s.dataKey"
+      :data-key="s.dataKey"
+      :name="s.name"
+      :y-axis-id="s.yAxisId"
+      :stack-id="stackIdFor(s.yAxisId)"
+      :fill="s.color"
+      :radius="isCubes ? 0 : barRadius(i)"
+      :hide="s.hidden"
+      :is-animation-active="duration !== void 0 && duration !== 0"
+    >
+      <!--
+        Always register `#shape`. vccs reads `slots.shape` once in Bar setup, so a
+        `v-if` on the slot means switching solid→cubes never picks up the cube renderer.
+      -->
+      <template #shape="shapeProps">
+        <CubeBarShape
+          v-if="isCubes"
+          :x="shapeProps.x"
+          :y="shapeProps.y"
+          :width="shapeProps.width"
+          :height="shapeProps.height"
+          :background="shapeProps.background"
+          :fill="shapeProps.fill ?? s.color"
+          :gap="cubeGap"
+          :radius="cubeRadius"
+          :preferred-size="cubeSize"
+          :min-size="typeof cubeMinSize === 'number' ? cubeMinSize : void 0"
+          :min-opacity="typeof cubeMinOpacity === 'number' ? cubeMinOpacity : void 0"
+          :empty-color="cubeEmptyColor"
+          :include-empty="!stacked || i === 0"
+        />
+        <Rectangle v-else v-bind="shapeProps" />
+      </template>
+      <LabelList
+        v-if="valueLabel && !isCubes"
+        :data-key="s.dataKey"
+        :value-accessor="valueAccessor"
+        :position="orientation === 'horizontal' ? 'right' : 'top'"
+        :offset="valueLabel.labelSpacing ?? 8"
+        :font-size="valueLabel.labelFontSize ?? 12"
+        :fill="valueLabel.color ?? 'currentColor'"
+      />
+    </Bar>
+  </CartesianFrame>
+</template>

package/dist/runtime/components/BarChart.vue.d.ts

@@ -0,0 +1,19 @@
+import type { BarChartProps } from "../types/charts.js";
+declare const __VLS_export: <T>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
+    props: import("vue").PublicProps & __VLS_PrettifyLocal<BarChartProps<T>> & (typeof globalThis extends {
+        __VLS_PROPS_FALLBACK: infer P;
+    } ? P : {});
+    expose: (exposed: {}) => void;
+    attrs: any;
+    slots: {};
+    emit: {};
+}>) => import("vue").VNode & {
+    __ctx?: Awaited<typeof __VLS_setup>;
+};
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_PrettifyLocal<T> = (T extends any ? {
+    [K in keyof T]: T[K];
+} : {
+    [K in keyof T as K]: T[K];
+}) & {};

package/dist/runtime/components/BubbleChart.d.vue.ts

@@ -0,0 +1,19 @@
+import type { BubbleChartProps } from "../types/charts.js";
+declare const __VLS_export: <T extends Record<string, unknown>>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
+    props: import("vue").PublicProps & __VLS_PrettifyLocal<BubbleChartProps<T>> & (typeof globalThis extends {
+        __VLS_PROPS_FALLBACK: infer P;
+    } ? P : {});
+    expose: (exposed: {}) => void;
+    attrs: any;
+    slots: {};
+    emit: {};
+}>) => import("vue").VNode & {
+    __ctx?: Awaited<typeof __VLS_setup>;
+};
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_PrettifyLocal<T> = (T extends any ? {
+    [K in keyof T]: T[K];
+} : {
+    [K in keyof T as K]: T[K];
+}) & {};

package/dist/runtime/components/BubbleChart.vue

@@ -0,0 +1,213 @@
+<script setup>
+import { computed } from "vue";
+import {
+  CartesianGrid,
+  Legend,
+  ResponsiveContainer,
+  Scatter,
+  ScatterChart,
+  Tooltip,
+  XAxis,
+  YAxis,
+  ZAxis
+} from "vccs";
+import ChartTooltip from "./internal/ChartTooltip.vue";
+import ChartLegend from "./internal/ChartLegend.vue";
+import { categoriesToSeries } from "../utils/categories";
+import { legendPositionToLegendProps, resolveLegendWrapperStyle } from "../utils/legend";
+import {
+  AXIS_TICK_MARGIN,
+  resolveAxisProps,
+  resolveXAxisHeight,
+  resolveYAxisWidth,
+  toTickFormatter,
+  toTickProp
+} from "../utils/axis";
+import { toAxisDomain, toCssProperties } from "../utils/style";
+import { axisTickVars, resolveHoverRadius, resolveHoverVisible, themeToVars } from "../utils/theme";
+const props = defineProps({
+  xAccessor: { type: Function, required: true, skipCheck: true },
+  yAccessor: { type: Function, required: true, skipCheck: true },
+  sizeAccessor: { type: Function, required: false, skipCheck: true },
+  categoryKey: { type: null, required: true },
+  sizeRange: { type: Array, required: false },
+  opacity: { type: Number, required: false },
+  sizeOptions: { type: Object, required: false },
+  data: { type: Array, required: true },
+  height: { type: Number, required: true },
+  xLabel: { type: String, required: false },
+  yLabel: { type: String, required: false },
+  padding: { type: Object, required: false },
+  categories: { type: Object, required: true },
+  xFormatter: { type: Function, required: false },
+  yFormatter: { type: Function, required: false },
+  tooltipTitleFormatter: { type: Function, required: false },
+  xNumTicks: { type: Number, required: false },
+  yNumTicks: { type: Number, required: false },
+  hideLegend: { type: Boolean, required: false },
+  hideTooltip: { type: Boolean, required: false },
+  legendPosition: { type: String, required: false },
+  legendStyle: { type: [String, Object], required: false },
+  xDomainLine: { type: Boolean, required: false },
+  yDomainLine: { type: Boolean, required: false },
+  xTickLine: { type: Boolean, required: false },
+  yTickLine: { type: Boolean, required: false },
+  xGridLine: { type: Boolean, required: false },
+  yGridLine: { type: Boolean, required: false },
+  hideXAxis: { type: Boolean, required: false },
+  hideYAxis: { type: Boolean, required: false },
+  xDomain: { type: Array, required: false },
+  yDomain: { type: Array, required: false },
+  duration: { type: Number, required: false },
+  xAxisConfig: { type: Object, required: false },
+  yAxisConfig: { type: Object, required: false },
+  yAxes: { type: Object, required: false },
+  tooltip: { type: Object, required: false },
+  referenceLines: { type: Array, required: false },
+  syncId: { type: String, required: false },
+  minMaxTicksOnly: { type: Boolean, required: false },
+  xExplicitTicks: { type: Array, required: false },
+  yExplicitTicks: { type: Array, required: false },
+  crosshairConfig: { type: Object, required: false },
+  theme: { type: Object, required: false }
+});
+function resolveAccessor(accessor) {
+  if (accessor === void 0) return void 0;
+  return typeof accessor === "function" ? accessor : String(accessor);
+}
+const xKey = computed(() => resolveAccessor(props.xAccessor));
+const yKey = computed(() => resolveAccessor(props.yAccessor));
+const zKey = computed(() => resolveAccessor(props.sizeAccessor));
+const categoryKey = computed(() => String(props.categoryKey));
+const legend = computed(() => legendPositionToLegendProps(props.legendPosition));
+const sizeRange = computed(() => {
+  if (props.sizeRange) return props.sizeRange;
+  const min = props.sizeOptions?.minRadius;
+  const max = props.sizeOptions?.maxRadius;
+  if (min !== void 0 || max !== void 0) {
+    const rMin = min ?? 4;
+    const rMax = max ?? 20;
+    return [Math.PI * rMin * rMin, Math.PI * rMax * rMax];
+  }
+  return [60, 400];
+});
+const xTickFormatter = computed(() => toTickFormatter(props.xFormatter));
+const yTickFormatter = computed(() => toTickFormatter(props.yFormatter));
+const xAxisDomain = computed(() => toAxisDomain(props.xDomain));
+const yAxisDomain = computed(() => toAxisDomain(props.yDomain));
+const legendWrapperStyle = computed(
+  () => resolveLegendWrapperStyle(props.legendPosition, toCssProperties(props.legendStyle))
+);
+const xAxis = computed(
+  () => resolveAxisProps(props.xExplicitTicks, props.xAxisConfig, props.minMaxTicksOnly)
+);
+const yAxis = computed(() => resolveAxisProps(void 0, props.yAxisConfig, props.minMaxTicksOnly));
+const xAxisHeight = computed(() => resolveXAxisHeight({ hasTitle: !!props.xLabel }));
+const yAxisWidth = computed(
+  () => resolveYAxisWidth({ hasTitle: !!props.yLabel, isCategoryAxis: false })
+);
+const themeVars = computed(() => ({
+  ...themeToVars(props.theme),
+  ...axisTickVars("x", xAxis.value.tick),
+  ...axisTickVars("y", yAxis.value.tick)
+}));
+const xTickProp = computed(() => toTickProp(xAxis.value.tick));
+const yTickProp = computed(() => toTickProp(yAxis.value.tick));
+const axisLineStyle = { stroke: "var(--vc-axis-line-color)" };
+const xTickLineProp = computed(
+  () => props.xAxisConfig?.tickLine ?? props.xTickLine ?? false ? axisLineStyle : false
+);
+const yTickLineProp = computed(
+  () => props.yAxisConfig?.tickLine ?? props.yTickLine ?? false ? axisLineStyle : false
+);
+const cursor = computed(
+  () => resolveHoverVisible(props.theme) ? {
+    fill: "var(--vc-hover-fill)",
+    stroke: "var(--vc-hover-stroke)",
+    radius: resolveHoverRadius(props.theme)
+  } : false
+);
+const groups = computed(() => {
+  const colorByCat = /* @__PURE__ */ new Map();
+  for (const s of categoriesToSeries(props.categories)) colorByCat.set(s.dataKey, s.color);
+  const byCategory = /* @__PURE__ */ new Map();
+  for (const row of props.data) {
+    const cat = String(row[categoryKey.value]);
+    const bucket = byCategory.get(cat);
+    if (bucket) bucket.push(row);
+    else byCategory.set(cat, [row]);
+  }
+  return Array.from(byCategory.entries()).map(([name, data]) => ({
+    name,
+    data,
+    color: colorByCat.get(name)
+  }));
+});
+</script>
+
+<template>
+  <div class="vue-chrts" :style="themeVars">
+  <ResponsiveContainer width="100%" :height="height">
+    <ScatterChart>
+      <CartesianGrid
+        v-if="(xGridLine ?? true) || (yGridLine ?? true)"
+        stroke="var(--vc-grid-color)"
+        stroke-dasharray="var(--vc-grid-dash)"
+        :stroke-width="'var(--vc-grid-width)'"
+      />
+      <XAxis
+        v-if="!hideXAxis"
+        type="number"
+        :data-key="xKey"
+        :name="xLabel"
+        :height="xAxisHeight"
+        :tick="xTickProp"
+        :tick-margin="AXIS_TICK_MARGIN.x"
+        :tick-line="xTickLineProp"
+        :axis-line="axisLineStyle"
+        :tick-formatter="xTickFormatter"
+        :domain="xAxisDomain"
+        :ticks="xAxis.ticks"
+        :interval="xAxis.interval"
+      />
+      <YAxis
+        v-if="!hideYAxis"
+        type="number"
+        :data-key="yKey"
+        :name="yLabel"
+        :width="yAxisWidth"
+        :tick="yTickProp"
+        :tick-margin="AXIS_TICK_MARGIN.y"
+        :tick-line="yTickLineProp"
+        :axis-line="axisLineStyle"
+        :tick-formatter="yTickFormatter"
+        :domain="yAxisDomain"
+        :interval="yAxis.interval"
+      />
+      <ZAxis v-if="zKey" type="number" :data-key="zKey" :range="sizeRange" />
+
+      <Scatter
+        v-for="g in groups"
+        :key="g.name"
+        :name="g.name"
+        :data="g.data"
+        :fill="g.color"
+        :fill-opacity="opacity ?? 0.7"
+      />
+
+      <Tooltip v-if="!hideTooltip" :content="ChartTooltip" :cursor="cursor" :is-animation-active="false" />
+      <Legend
+        v-if="!hideLegend"
+        :align="legend.align"
+        :vertical-align="legend.verticalAlign"
+        :layout="legend.layout"
+        :wrapper-style="legendWrapperStyle"
+      >
+        <template #content="slotProps">
+          <ChartLegend v-bind="slotProps" />
+        </template>
+      </Legend>
+    </ScatterChart>
+  </ResponsiveContainer>
+  </div>
+</template>

package/dist/runtime/components/BubbleChart.vue.d.ts

@@ -0,0 +1,19 @@
+import type { BubbleChartProps } from "../types/charts.js";
+declare const __VLS_export: <T extends Record<string, unknown>>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
+    props: import("vue").PublicProps & __VLS_PrettifyLocal<BubbleChartProps<T>> & (typeof globalThis extends {
+        __VLS_PROPS_FALLBACK: infer P;
+    } ? P : {});
+    expose: (exposed: {}) => void;
+    attrs: any;
+    slots: {};
+    emit: {};
+}>) => import("vue").VNode & {
+    __ctx?: Awaited<typeof __VLS_setup>;
+};
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_PrettifyLocal<T> = (T extends any ? {
+    [K in keyof T]: T[K];
+} : {
+    [K in keyof T as K]: T[K];
+}) & {};

package/dist/runtime/components/CandlestickChart.d.vue.ts

@@ -0,0 +1,19 @@
+import type { CandlestickChartProps } from "../types/charts.js";
+declare const __VLS_export: <T extends Record<string, unknown>>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
+    props: import("vue").PublicProps & __VLS_PrettifyLocal<CandlestickChartProps<T>> & (typeof globalThis extends {
+        __VLS_PROPS_FALLBACK: infer P;
+    } ? P : {});
+    expose: (exposed: {}) => void;
+    attrs: any;
+    slots: {};
+    emit: {};
+}>) => import("vue").VNode & {
+    __ctx?: Awaited<typeof __VLS_setup>;
+};
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_PrettifyLocal<T> = (T extends any ? {
+    [K in keyof T]: T[K];
+} : {
+    [K in keyof T as K]: T[K];
+}) & {};