@opendata-ai/openchart-engine 6.1.5 → 6.2.1

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 = [
@@ -6987,7 +7004,8 @@ function formatTickLabel(value, resolvedScale) {
   if (TEMPORAL_SCALE_TYPES.has(resolvedScale.type)) {
     const temporalFmt = buildTemporalFormatter(formatStr);
     if (temporalFmt) return temporalFmt(value);
-    return formatDate(value);
+    const useUtc = resolvedScale.type === "utc";
+    return formatDate(value, void 0, void 0, useUtc);
   }
   if (NUMERIC_SCALE_TYPES.has(resolvedScale.type)) {
     const num = value;
@@ -7240,7 +7258,19 @@ function computeDimensions(spec, options, legendLayout, theme, strategy) {
       for (const ann of spec.annotations) {
         if (ann.type === "text" && String(ann.x) === maxXStr) {
           const textWidth = estimateTextWidth8(ann.text, ann.fontSize ?? 11, ann.fontWeight ?? 600);
-          margins.right = Math.max(margins.right, padding + textWidth + 12);
+          const dx = ann.offset?.dx ?? 0;
+          const anchor = ann.anchor ?? "auto";
+          const baseRightExtent = anchor === "left" ? textWidth : (
+            // text is to the right of anchor
+            anchor === "right" ? 0 : (
+              // text is to the left of anchor
+              textWidth / 2
+            )
+          );
+          const rightOverflow = Math.max(0, baseRightExtent + dx);
+          if (rightOverflow > 0) {
+            margins.right = Math.max(margins.right, padding + rightOverflow + 12);
+          }
         }
       }
     }