@blokkli/editor 2.0.0-alpha.58 → 2.0.0-alpha.59

package/dist/modules/charts/runtime/features/charts/Editor/CsvImport/PreviewDialog.vue

@@ -0,0 +1,340 @@
+<template>
+  <DialogModal
+    id="charts-csv-preview"
+    :title="$t('chartsCsvPreviewTitle', 'Preview CSV import')"
+    :lead="
+  $t(
+    'chartsCsvPreviewLead',
+    'Adjust the column mapping if needed; the preview below shows exactly what will be imported.'
+  )
+"
+    :width="1200"
+    icon="bk_mdi_csv"
+    :submit-label="$t('import', 'Import')"
+    :can-submit="canSubmit"
+    z-index="high"
+    mono
+    @submit="onSubmit"
+    @cancel="$emit('cancel')"
+  >
+    <PanelSection :title="$t('chartsCsvLayout', 'Layout')" padded>
+      <FormItem>
+        <FormToggle
+          :model-value="transpose"
+          :label="$t('chartsCsvTranspose', 'Transpose (swap rows and columns)')"
+          :description="
+  $t(
+    'chartsCsvTransposeDescription',
+    'Use this when the CSV has the categories along the top row instead of the first column.'
+  )
+"
+          @update:model-value="setTranspose"
+        />
+        <div class="_bk_mt-15">
+          <FormToggle
+            v-model="reverseRows"
+            :label="$t('chartsCsvReverseRows', 'Reverse row order')"
+          />
+        </div>
+      </FormItem>
+      <FormItem>
+        <FormSelect
+          id="charts-csv-sort"
+          v-model="sort"
+          :label="$t('chartsCsvSort', 'Sort categories')"
+          :options="sortOptions"
+        />
+      </FormItem>
+    </PanelSection>
+
+    <PanelSection :title="$t('data', 'Data')" padded>
+      <FormItem v-if="hasEnoughData">
+        <FormSelect
+          id="charts-csv-category"
+          v-model="categoryColumnStr"
+          :label="$t('chartsCsvCategoryColumn', 'Category column')"
+          :description="
+  $t(
+    'chartsCsvCategoryColumnDescription',
+    'Distinct values in this column become the categories of the chart.'
+  )
+"
+          :options="categoryColumnOptions"
+        />
+      </FormItem>
+      <FormItem v-if="hasEnoughData && valueOptions.length > 0">
+        <FormCheckboxes
+          id="charts-csv-values"
+          v-model="valueColumnsStr"
+          :label="$t('chartsCsvValueColumns', 'Value columns')"
+          :description="
+  $t(
+    'chartsCsvValueColumnsDescription',
+    'Numeric columns to import. Pick multiple to use each as its own series. Pick one to split rows into series via Group by.'
+  )
+"
+          :options="valueOptions"
+        />
+      </FormItem>
+    </PanelSection>
+
+    <GroupBySection
+      v-if="hasEnoughData && valueColumns.length === 1"
+      v-model="groupByColumns"
+      :grid="orientedGrid"
+      :header-cells="headerCells"
+      :available-columns="availableGroupByColumns"
+    />
+
+    <FiltersSection
+      v-model="filters"
+      :grid="orientedGrid"
+      :header-cells="headerCells"
+    />
+
+    <PanelSection :title="$t('chartsCsvOutputPreview', 'Output preview')">
+      <div v-if="!hasEnoughData" class="_bk_p-15">
+        <InfoBox
+          small
+          :text="
+  $t(
+    'chartsCsvInvalidFile',
+    'The CSV file does not contain enough data to import.'
+  )
+"
+        />
+      </div>
+      <div v-else-if="submitError" class="_bk_p-15">
+        <InfoBox small :text="submitError" />
+      </div>
+      <OutputPreviewTable
+        v-else
+        :payload="orderedPayload"
+        @move="onSeriesMove"
+      />
+    </PanelSection>
+  </DialogModal>
+</template>
+
+<script setup>
+import { ref, computed, useBlokkli } from "#imports";
+import {
+  DialogModal,
+  FormToggle,
+  FormSelect,
+  FormCheckboxes,
+  InfoBox,
+  FormItem
+} from "#blokkli/editor/components";
+import PanelSection from "#blokkli/editor/components/Panel/Section/index.vue";
+import {
+  columnLabelWithSample,
+  gridToImportPayload,
+  inferSmartConfig,
+  reverseRowsKeepingHeader,
+  transposeGrid
+} from "./csvHelpers";
+import GroupBySection from "./GroupBySection/index.vue";
+import FiltersSection from "./FiltersSection/index.vue";
+import OutputPreviewTable from "./OutputPreviewTable/index.vue";
+const props = defineProps({
+  grid: { type: Array, required: true },
+  fileName: { type: String, required: true }
+});
+const emit = defineEmits(["submit", "cancel"]);
+const { $t, config, storage } = useBlokkli();
+const savedConfig = storage.use(
+  computed(() => `charts:csvImport:${props.fileName}`),
+  null
+);
+const initial = savedConfig.value;
+const transpose = ref(initial?.transpose ?? false);
+const reverseRows = ref(initial?.reverseRows ?? false);
+const sort = ref(initial?.sort ?? "firstOccurrence");
+const orientedGrid = computed(() => {
+  let grid = props.grid;
+  if (transpose.value) grid = transposeGrid(grid);
+  if (reverseRows.value) grid = reverseRowsKeepingHeader(grid);
+  return grid;
+});
+const headerCells = computed(() => orientedGrid.value[0] ?? []);
+const hasEnoughData = computed(
+  () => orientedGrid.value.length >= 2 && headerCells.value.length > 0
+);
+const categoryColumn = ref(initial?.categoryColumn ?? 0);
+const valueColumns = ref(initial?.valueColumns ?? []);
+const groupByColumns = ref(initial?.groupByColumns ?? []);
+const filters = ref(initial?.filters ?? []);
+function runInference() {
+  const inferred = inferSmartConfig(orientedGrid.value);
+  categoryColumn.value = inferred.category;
+  valueColumns.value = inferred.values;
+  groupByColumns.value = inferred.groupBy;
+  filters.value = inferred.filters;
+}
+if (!initial) runInference();
+function pruneGroupBy() {
+  if (valueColumns.value.length !== 1) {
+    if (groupByColumns.value.length > 0) groupByColumns.value = [];
+    return;
+  }
+  const vc = valueColumns.value[0];
+  if (groupByColumns.value.includes(vc)) {
+    groupByColumns.value = groupByColumns.value.filter((c) => c !== vc);
+  }
+}
+function setTranspose(value) {
+  transpose.value = !!value;
+  if (!initial) runInference();
+}
+const categoryColumnStr = computed({
+  get() {
+    return String(categoryColumn.value);
+  },
+  set(v) {
+    const n = Number(v);
+    if (!Number.isFinite(n)) return;
+    categoryColumn.value = n;
+    if (valueColumns.value.includes(n)) {
+      valueColumns.value = valueColumns.value.filter((c) => c !== n);
+    }
+    if (groupByColumns.value.includes(n)) {
+      groupByColumns.value = groupByColumns.value.filter((c) => c !== n);
+    }
+    pruneGroupBy();
+  }
+});
+const categoryColumnOptions = computed(
+  () => headerCells.value.map((_name, i) => ({
+    value: String(i),
+    label: columnLabelWithSample(orientedGrid.value, i)
+  }))
+);
+const valueColumnsStr = computed({
+  get() {
+    return valueColumns.value.map(String);
+  },
+  set(v) {
+    valueColumns.value = v.map((s) => Number(s)).filter((n) => Number.isFinite(n));
+    pruneGroupBy();
+  }
+});
+const valueOptions = computed(
+  () => headerCells.value.map((_name, i) => i).filter((i) => i !== categoryColumn.value).map((i) => ({
+    value: String(i),
+    label: columnLabelWithSample(orientedGrid.value, i)
+  }))
+);
+const availableGroupByColumns = computed(() => {
+  const used = /* @__PURE__ */ new Set([
+    categoryColumn.value,
+    ...valueColumns.value,
+    ...groupByColumns.value
+  ]);
+  return headerCells.value.map((_, i) => i).filter((i) => !used.has(i));
+});
+const sortOptions = computed(() => [
+  {
+    value: "firstOccurrence",
+    label: $t("chartsCsvSortFirstOccurrence", "First occurrence")
+  },
+  {
+    value: "alphabetical",
+    label: $t("chartsCsvSortAlphabetical", "Alphabetical")
+  },
+  { value: "numeric", label: $t("chartsCsvSortNumeric", "Numeric") }
+]);
+const roles = computed(() => {
+  const out = headerCells.value.map(() => "ignore");
+  if (categoryColumn.value >= 0 && categoryColumn.value < out.length) {
+    out[categoryColumn.value] = "category";
+  }
+  if (valueColumns.value.length === 1) {
+    const vc = valueColumns.value[0];
+    if (vc < out.length && out[vc] === "ignore") out[vc] = "value";
+    for (const gb of groupByColumns.value) {
+      if (gb < out.length && out[gb] === "ignore") out[gb] = "groupBy";
+    }
+  } else {
+    for (const v of valueColumns.value) {
+      if (v < out.length && out[v] === "ignore") out[v] = "series";
+    }
+  }
+  return out;
+});
+const importConfig = computed(() => ({
+  roles: roles.value,
+  filters: filters.value,
+  sort: sort.value,
+  groupBySeparator: " \xB7 "
+}));
+const outputPayload = computed(
+  () => gridToImportPayload(
+    orientedGrid.value,
+    importConfig.value,
+    config.colorOptions.value
+  )
+);
+const seriesOrder = ref(initial?.seriesOrder ?? []);
+const orderedPayload = computed(() => {
+  const remaining = new Map(outputPayload.value.series.map((s) => [s.name, s]));
+  const reordered = [];
+  for (const name of seriesOrder.value) {
+    const s = remaining.get(name);
+    if (s) {
+      reordered.push(s);
+      remaining.delete(name);
+    }
+  }
+  for (const s of outputPayload.value.series) {
+    if (remaining.has(s.name)) reordered.push(s);
+  }
+  return { ...outputPayload.value, series: reordered };
+});
+function onSeriesMove({ from, to }) {
+  const names = orderedPayload.value.series.map((s) => s.name);
+  if (from < 0 || from >= names.length || to < 0 || to >= names.length) {
+    return;
+  }
+  const [moved] = names.splice(from, 1);
+  if (moved === void 0) return;
+  names.splice(to, 0, moved);
+  seriesOrder.value = names;
+}
+const submitError = computed(() => {
+  if (!hasEnoughData.value) return null;
+  if (valueColumns.value.length === 0) {
+    return $t("chartsCsvNoValues", "Pick at least one value column to import.");
+  }
+  if (outputPayload.value.series.length === 0) {
+    return $t(
+      "chartsCsvEmptyOutput",
+      "No data after filtering \u2014 adjust filter selections."
+    );
+  }
+  if (outputPayload.value.categories.length === 0) {
+    return $t(
+      "chartsCsvNoCategories",
+      "No categories produced \u2014 check the Category column and filters."
+    );
+  }
+  return null;
+});
+const canSubmit = computed(
+  () => hasEnoughData.value && submitError.value === null
+);
+function onSubmit() {
+  if (!canSubmit.value) return;
+  savedConfig.value = {
+    transpose: transpose.value,
+    reverseRows: reverseRows.value,
+    sort: sort.value,
+    categoryColumn: categoryColumn.value,
+    valueColumns: valueColumns.value,
+    groupByColumns: groupByColumns.value,
+    filters: filters.value,
+    seriesOrder: orderedPayload.value.series.map((s) => s.name)
+  };
+  emit("submit", orderedPayload.value);
+}
+</script>

package/dist/modules/charts/runtime/features/charts/Editor/CsvImport/PreviewDialog.vue.d.ts

@@ -0,0 +1,14 @@
+import { type CsvGrid, type CsvImportPayload } from './csvHelpers.js';
+type __VLS_Props = {
+    grid: CsvGrid;
+    fileName: string;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    submit: (payload: CsvImportPayload) => any;
+    cancel: () => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onSubmit?: ((payload: CsvImportPayload) => any) | undefined;
+    onCancel?: (() => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/modules/charts/runtime/features/charts/Editor/CsvImport/csvHelpers.d.ts

@@ -0,0 +1,69 @@
+import type { ColorOption } from '#blokkli/editor/types/config';
+import type { ChartSeries } from '../../../../types.js';
+export type CsvGrid = string[][];
+export type ColumnRole = 'category' | 'series' | 'value' | 'groupBy' | 'ignore';
+export type CategorySort = 'firstOccurrence' | 'alphabetical' | 'numeric';
+export interface CsvImportFilter {
+    /** Index of the column the filter applies to. */
+    column: number;
+    /** Allowed values. A row is kept only if its cell is in this set. */
+    values: string[];
+}
+export interface CsvImportConfig {
+    /** One entry per column in the (possibly transposed) grid. */
+    roles: ColumnRole[];
+    /**
+     * Independent filters. Each filter restricts rows to those whose cell in
+     * the named column matches one of `values`. Filters are AND-combined.
+     */
+    filters: CsvImportFilter[];
+    sort: CategorySort;
+    /** Joins values across `groupBy` columns into a single series name. */
+    groupBySeparator: string;
+}
+export interface CsvImportPayload {
+    categories: string[];
+    series: ChartSeries[];
+    categoryColors: string[];
+}
+export declare function parseCsvLine(line: string): string[];
+export declare function parseCsvText(text: string): CsvGrid;
+export declare function transposeGrid(grid: CsvGrid): CsvGrid;
+/**
+ * Reverse data rows while keeping the header row at the top.
+ */
+export declare function reverseRowsKeepingHeader(grid: CsvGrid): CsvGrid;
+/**
+ * Heuristic for whether a column's data cells (rows 1..N) are mostly numeric.
+ * A column counts as numeric when ≥ 80 % of its non-empty cells parse as a
+ * finite number. Used to pick a sensible default role.
+ */
+export declare function isMostlyNumeric(grid: CsvGrid, colIdx: number): boolean;
+/**
+ * Infer a sensible default configuration for the CSV.
+ *
+ * Wide CSVs (e.g. `[month, sales, costs]`) land with category = first
+ * column, values = the rest. Long / tidy CSVs (one numeric column +
+ * categorical dimensions) get the highest-cardinality categorical as
+ * category, the numeric measure as the single value, low-cardinality
+ * categoricals as group-by, and year-like dimensions pinned to their
+ * latest value via filters.
+ */
+export declare function inferSmartConfig(grid: CsvGrid): {
+    category: number;
+    values: number[];
+    groupBy: number[];
+    filters: CsvImportFilter[];
+};
+/**
+ * Build a "header (val1, val2, val3)" label for a column. Used in
+ * select/checkbox option labels so the user can tell columns apart even
+ * when the header alone is opaque (`heimat`, `typ`, `id_pro_typ`).
+ */
+export declare function columnLabelWithSample(grid: CsvGrid, colIdx: number, maxValues?: number, maxValueLen?: number): string;
+/**
+ * Distinct non-empty values in a column (rows 1..N), ordered by first
+ * occurrence. Used to populate the filter multi-select for filter columns.
+ */
+export declare function distinctColumnValues(grid: CsvGrid, colIdx: number): string[];
+export declare function gridToImportPayload(grid: CsvGrid, config: CsvImportConfig, colorOptions: ColorOption[]): CsvImportPayload;