@opendata-ai/openchart-engine 6.1.4 → 6.2.0

package/dist/index.js

@@ -6555,20 +6555,24 @@ function resolveNodeVisuals(nodes, encoding, edges, theme, nodeOverrides) {
   if (encoding.nodeColor?.field) {
     const field = encoding.nodeColor.field;
     const fieldType = encoding.nodeColor.type ?? "nominal";
+    const scaleConfig = encoding.nodeColor.scale;
     if (fieldType === "quantitative") {
       const values = nodes.map((n) => Number(n[field])).filter((v) => Number.isFinite(v));
       const colorMin = min2(values) ?? 0;
       const colorMax = max2(values) ?? 1;
       const seqPalettes = Object.values(theme.colors.sequential);
       const palette = seqPalettes.length > 0 ? seqPalettes[0] : ["#ccc", "#333"];
-      const colorScale = linear2().domain([colorMin, colorMax]).range([palette[0], palette[palette.length - 1]]);
+      const domain = scaleConfig?.domain && scaleConfig.domain.length === 2 ? scaleConfig.domain : [colorMin, colorMax];
+      const range2 = scaleConfig?.range && scaleConfig.range.length >= 2 ? scaleConfig.range : [palette[0], palette[palette.length - 1]];
+      const colorScale = linear2().domain(domain).range(range2);
       colorFn = (node) => {
         const val = Number(node[field]);
         return Number.isFinite(val) ? colorScale(val) : theme.colors.categorical[0];
       };
     } else {
-      const uniqueValues = [...new Set(nodes.map((n) => String(n[field] ?? "")))];
-      const ordinalScale = ordinal().domain(uniqueValues).range(theme.colors.categorical);
+      const domain = scaleConfig?.domain && Array.isArray(scaleConfig.domain) ? scaleConfig.domain : [...new Set(nodes.map((n) => String(n[field] ?? "")))];
+      const range2 = scaleConfig?.range && scaleConfig.range.length > 0 ? scaleConfig.range : theme.colors.categorical;
+      const ordinalScale = ordinal().domain(domain).range(range2);
       colorFn = (node) => ordinalScale(String(node[field] ?? ""));
     }
   }
@@ -6626,20 +6630,24 @@ function resolveEdgeVisuals(edges, encoding, theme) {
   if (encoding.edgeColor?.field) {
     const field = encoding.edgeColor.field;
     const fieldType = encoding.edgeColor.type ?? "nominal";
+    const scaleConfig = encoding.edgeColor.scale;
     if (fieldType === "quantitative") {
       const values = edges.map((e) => Number(e[field])).filter((v) => Number.isFinite(v));
       const colorMin = min2(values) ?? 0;
       const colorMax = max2(values) ?? 1;
       const seqPalettes = Object.values(theme.colors.sequential);
       const palette = seqPalettes.length > 0 ? seqPalettes[0] : ["#ccc", "#333"];
-      const colorScale = linear2().domain([colorMin, colorMax]).range([palette[0], palette[palette.length - 1]]);
+      const domain = scaleConfig?.domain && scaleConfig.domain.length === 2 ? scaleConfig.domain : [colorMin, colorMax];
+      const range2 = scaleConfig?.range && scaleConfig.range.length >= 2 ? scaleConfig.range : [palette[0], palette[palette.length - 1]];
+      const colorScale = linear2().domain(domain).range(range2);
       edgeColorFn = (edge) => {
         const val = Number(edge[field]);
         return Number.isFinite(val) ? colorScale(val) : hexWithOpacity(theme.colors.axis, 0.4);
       };
     } else {
-      const uniqueValues = [...new Set(edges.map((e) => String(e[field] ?? "")))];
-      const ordinalScale = ordinal().domain(uniqueValues).range(theme.colors.categorical);
+      const domain = scaleConfig?.domain && Array.isArray(scaleConfig.domain) ? scaleConfig.domain : [...new Set(edges.map((e) => String(e[field] ?? "")))];
+      const range2 = scaleConfig?.range && scaleConfig.range.length > 0 ? scaleConfig.range : theme.colors.categorical;
+      const ordinalScale = ordinal().domain(domain).range(range2);
       edgeColorFn = (edge) => ordinalScale(String(edge[field] ?? ""));
     }
   }
@@ -6713,7 +6721,7 @@ function applyCommunityColors(nodes, colorMap) {
 var SWATCH_SIZE = 12;
 var SWATCH_GAP = 6;
 var ENTRY_GAP = 16;
-function buildGraphLegend(nodes, communityColorMap, hasCommunities, theme) {
+function buildGraphLegend(nodes, communityColorMap, hasCommunities, theme, nodeColorField) {
   const labelStyle = {
     fontFamily: theme.fonts.family,
     fontSize: theme.fonts.sizes.small,
@@ -6730,16 +6738,17 @@ function buildGraphLegend(nodes, communityColorMap, hasCommunities, theme) {
       active: true
     }));
   } else {
-    const colorLabels = /* @__PURE__ */ new Map();
+    const categoryColors = /* @__PURE__ */ new Map();
     for (const node of nodes) {
-      if (!colorLabels.has(node.fill)) {
-        colorLabels.set(node.fill, node.label ?? node.id);
+      const category = nodeColorField ? String(node.data[nodeColorField] ?? node.label ?? node.id) : node.label ?? node.id;
+      if (!categoryColors.has(category)) {
+        categoryColors.set(category, node.fill);
       }
     }
-    if (colorLabels.size <= 1) {
+    if (categoryColors.size <= 1) {
       entries = [];
     } else {
-      entries = [...colorLabels.entries()].map(([color2, label]) => ({
+      entries = [...categoryColors.entries()].map(([label, color2]) => ({
         label,
         color: color2,
         shape: "circle",
@@ -6806,13 +6815,21 @@ function compileGraph(spec, options) {
   const clusteringField = graphSpec.layout.clustering?.field;
   const hasCommunities = !!clusteringField;
   assignCommunities(compiledNodes, clusteringField);
+  const hasNodeColorEncoding = !!graphSpec.encoding.nodeColor?.field;
   let communityColorMap = /* @__PURE__ */ new Map();
-  if (hasCommunities) {
+  if (hasCommunities && !hasNodeColorEncoding) {
     communityColorMap = buildCommunityColorMap(compiledNodes, theme);
     applyCommunityColors(compiledNodes, communityColorMap);
   }
   const compiledEdges = resolveEdgeVisuals(graphSpec.edges, graphSpec.encoding, theme);
-  const legend = buildGraphLegend(compiledNodes, communityColorMap, hasCommunities, theme);
+  const useCommunitiesForLegend = hasCommunities && !hasNodeColorEncoding;
+  const legend = buildGraphLegend(
+    compiledNodes,
+    communityColorMap,
+    useCommunitiesForLegend,
+    theme,
+    graphSpec.encoding.nodeColor?.field
+  );
   const tooltipDescriptors = buildGraphTooltips(compiledNodes);
   const communityCount = communityColorMap.size;
   const altParts = [
@@ -6873,6 +6890,7 @@ var DEFAULT_COLLISION_PADDING = 5;
 import {
   abbreviateNumber as abbreviateNumber3,
   buildD3Formatter as buildD3Formatter3,
+  buildTemporalFormatter,
   estimateTextWidth as estimateTextWidth7,
   formatDate,
   formatNumber as formatNumber3
@@ -6984,7 +7002,8 @@ var TEMPORAL_SCALE_TYPES = /* @__PURE__ */ new Set(["time", "utc"]);
 function formatTickLabel(value, resolvedScale) {
   const formatStr = resolvedScale.channel.axis?.format;
   if (TEMPORAL_SCALE_TYPES.has(resolvedScale.type)) {
-    if (formatStr) return String(value);
+    const temporalFmt = buildTemporalFormatter(formatStr);
+    if (temporalFmt) return temporalFmt(value);
     return formatDate(value);
   }
   if (NUMERIC_SCALE_TYPES.has(resolvedScale.type)) {
@@ -8550,10 +8569,12 @@ function compileTableLayout(spec, options, theme) {
 }
 
 // src/tooltips/compute.ts
-import { formatDate as formatDate3, formatNumber as formatNumber5 } from "@opendata-ai/openchart-core";
+import { buildTemporalFormatter as buildTemporalFormatter2, formatDate as formatDate3, formatNumber as formatNumber5 } from "@opendata-ai/openchart-core";
 function formatValue(value, fieldType, format2) {
   if (value == null) return "";
   if (fieldType === "temporal" || value instanceof Date) {
+    const temporalFmt = buildTemporalFormatter2(format2);
+    if (temporalFmt) return temporalFmt(value);
     return formatDate3(value);
   }
   if (typeof value === "number") {