@inglorious/charts 1.0.1

package/src/utils/paths.js

@@ -0,0 +1,279 @@
+import {
+  arc,
+  area,
+  curveLinear,
+  curveMonotoneX,
+  line,
+  pie,
+  stack,
+} from "d3-shape"
+
+import { getDataPointX, getDataPointY } from "./data-utils.js"
+
+// Fallback Y value when scale returns NaN
+const FALLBACK_Y_VALUE = 0
+
+export function generateLinePath(data, xScale, yScale, curveType = "linear") {
+  const curve = curveType === "monotone" ? curveMonotoneX : curveLinear
+  const lineGenerator = line()
+    .x((d, i) => {
+      // Always pass index as fallback to ensure we have a valid x value
+      const xVal = getDataPointX(d, i)
+      const scaled = xScale(xVal)
+      if (isNaN(scaled)) {
+        console.warn("[generateLinePath] NaN x value:", {
+          d,
+          i,
+          xVal,
+          scaled,
+          xScaleDomain: xScale.domain(),
+          xScaleRange: xScale.range(),
+        })
+        // Fallback to index if scaled is NaN
+        return xScale(i)
+      }
+      return scaled
+    })
+    .y((d) => {
+      const yVal = getDataPointY(d)
+      const scaled = yScale(yVal)
+      if (isNaN(scaled)) {
+        console.warn("[generateLinePath] NaN y value:", {
+          d,
+          yVal,
+          scaled,
+          yScaleDomain: yScale.domain(),
+          yScaleRange: yScale.range(),
+        })
+        // Fallback to 0 if scaled is NaN
+        return yScale(FALLBACK_Y_VALUE)
+      }
+      return scaled
+    })
+    .curve(curve)
+  return lineGenerator(data)
+}
+
+/* eslint-disable no-magic-numbers */
+export function generateAreaPath(
+  data,
+  xScale,
+  yScale,
+  baseValue = 0,
+  curveType = "linear",
+) {
+  const curve = curveType === "monotone" ? curveMonotoneX : curveLinear
+  const areaGenerator = area()
+    .x((d, i) => {
+      // Always pass index as fallback to ensure we have a valid x value
+      const xVal = getDataPointX(d, i)
+      const scaled = xScale(xVal)
+      if (isNaN(scaled)) {
+        // Fallback to index if scaled is NaN
+        return xScale(i)
+      }
+      return scaled
+    })
+    .y0(() => yScale(baseValue))
+    .y1((d) => {
+      const yVal = getDataPointY(d)
+      const scaled = yScale(yVal)
+      if (isNaN(scaled)) {
+        // Fallback to 0 if scaled is NaN
+        return yScale(0)
+      }
+      return scaled
+    })
+    .curve(curve)
+  return areaGenerator(data)
+}
+
+/**
+ * Generate stacked area path with dynamic y0 and y1 values
+ * @param {any[]} data - Data points
+ * @param {import('d3-scale').ScaleLinear|import('d3-scale').ScaleTime} xScale - X scale
+ * @param {import('d3-scale').ScaleLinear} yScale - Y scale
+ * @param {Array<[number, number]>} stackedData - Array of [y0, y1] tuples for each data point
+ * @param {string} curveType - Curve type ("linear" or "monotone")
+ * @returns {string} SVG path string
+ */
+export function generateStackedAreaPath(
+  data,
+  xScale,
+  yScale,
+  stackedData,
+  curveType = "linear",
+) {
+  const curve = curveType === "monotone" ? curveMonotoneX : curveLinear
+  const areaGenerator = area()
+    .x((d) => xScale(getDataPointX(d, null)))
+    .y0((d, i) => yScale(stackedData[i]?.[0] ?? 0))
+    .y1((d, i) => yScale(stackedData[i]?.[1] ?? 0))
+    .curve(curve)
+  return areaGenerator(data)
+}
+
+/**
+ * Calculate stacked data for multiple series
+ * Returns array where each element is an array of [y0, y1] tuples for each data point
+ * @param {any[]} seriesData - Array of series objects with values arrays
+ * @param {Function} valueAccessor - Function to extract value from data point
+ * @returns {Array<Array<[number, number]>>} Stacked data for each series
+ */
+export function calculateStackedData(
+  seriesData,
+  valueAccessor = (d) => getDataPointY(d),
+) {
+  if (!seriesData || seriesData.length === 0) {
+    return []
+  }
+
+  // Get all series values
+  const allSeriesValues = seriesData.map((series) =>
+    Array.isArray(series.values) ? series.values : [series],
+  )
+
+  // Find maximum length to handle different series lengths
+  const maxLength = Math.max(...allSeriesValues.map((s) => s.length))
+
+  // Create data structure for d3-shape stack
+  // Each entry represents one x position with values from all series
+  const data = []
+  for (let i = 0; i < maxLength; i++) {
+    const entry = {}
+    allSeriesValues.forEach((values, seriesIndex) => {
+      const point = values[i]
+      entry[seriesIndex] = point ? valueAccessor(point) : 0
+    })
+    data.push(entry)
+  }
+
+  // Create stack generator
+  const keys = seriesData.map((_, i) => i)
+  const stackGenerator = stack()
+    .keys(keys)
+    .value((d, key) => d[key] ?? 0)
+
+  // Generate stacked data
+  const stacked = stackGenerator(data)
+
+  // Transform to array of [y0, y1] tuples for each series
+  return stacked.map((series) => series.map((point) => [point[0], point[1]]))
+}
+
+/**
+ * Calculates pie data with support for startAngle, endAngle, paddingAngle, and minAngle
+ * @param {any[]} data - The data array
+ * @param {Function} valueAccessor - Function to extract value from data (default: d => d.value)
+ * @param {number} startAngle - Start angle in degrees (default: 0)
+ * @param {number} endAngle - End angle in degrees (default: 360)
+ * @param {number} paddingAngle - Padding angle between sectors in degrees (default: 0)
+ * @param {number} minAngle - Minimum angle for each sector in degrees (default: 0)
+ * @returns {any[]} Pie data with calculated angles
+ */
+export function calculatePieData(
+  data,
+  valueAccessor = (d) => d.value,
+  startAngle = 0,
+  endAngle = 360,
+  paddingAngle = 0,
+  minAngle = 0,
+) {
+  // Calculate total angle range
+  const deltaAngle = endAngle - startAngle
+  const absDeltaAngle = Math.abs(deltaAngle)
+  const sign = Math.sign(deltaAngle) || 1
+
+  // Count non-zero items
+  const notZeroItemCount = data.filter(
+    (entry) => valueAccessor(entry) !== 0,
+  ).length
+
+  // Calculate total padding angle
+  const totalPaddingAngle =
+    absDeltaAngle >= 360
+      ? notZeroItemCount * paddingAngle
+      : (notZeroItemCount - 1) * paddingAngle
+
+  // Calculate real total angle (subtract minAngle for each non-zero item and padding)
+  const minAngleRad = Math.abs(minAngle) * (Math.PI / 180)
+  const realTotalAngle =
+    absDeltaAngle * (Math.PI / 180) -
+    notZeroItemCount * minAngleRad -
+    totalPaddingAngle * (Math.PI / 180)
+
+  // Calculate sum of values
+  const sum = data.reduce((result, entry) => {
+    const val = valueAccessor(entry)
+    return result + (typeof val === "number" ? val : 0)
+  }, 0)
+
+  // Build pie data manually to apply minAngle correctly
+  if (sum > 0) {
+    const startAngleRad = (startAngle - 90) * (Math.PI / 180) // Offset by -90° (SVG starts at top)
+    const paddingAngleRad = paddingAngle * (Math.PI / 180)
+
+    let currentAngle = startAngleRad
+
+    return data.map((entry, i) => {
+      const val = valueAccessor(entry)
+      const isZero = val === 0 || typeof val !== "number"
+
+      const percent = isZero ? 0 : val / sum
+      const sliceAngle = isZero ? 0 : minAngleRad + percent * realTotalAngle
+
+      const sliceStartAngle = currentAngle
+      const sliceEndAngle = currentAngle + sign * sliceAngle
+
+      // Move to next slice (add padding if not last)
+      if (!isZero && i < data.length - 1) {
+        currentAngle = sliceEndAngle + sign * paddingAngleRad
+      } else {
+        currentAngle = sliceEndAngle
+      }
+
+      return {
+        data: entry,
+        value: isZero ? 0 : val,
+        index: i,
+        startAngle: sliceStartAngle,
+        endAngle: sliceEndAngle,
+        padAngle: isZero ? 0 : paddingAngleRad,
+      }
+    })
+  }
+
+  // Fallback to d3-shape if no data or sum is 0
+  const pieGenerator = pie()
+    .value(valueAccessor)
+    .sort(null)
+    .startAngle((startAngle - 90) * (Math.PI / 180))
+    .endAngle((endAngle - 90) * (Math.PI / 180))
+    .padAngle(paddingAngle * (Math.PI / 180))
+
+  return pieGenerator(data)
+}
+
+/**
+ * Generates SVG arc path with support for cornerRadius
+ * @param {number} innerRadius - Inner radius
+ * @param {number} outerRadius - Outer radius
+ * @param {number} startAngle - Start angle in radians
+ * @param {number} endAngle - End angle in radians
+ * @param {number} cornerRadius - Corner radius for rounded edges (default: 0)
+ * @returns {string} SVG path string
+ */
+export function generateArcPath(
+  innerRadius,
+  outerRadius,
+  startAngle,
+  endAngle,
+  cornerRadius = 0,
+) {
+  return arc()
+    .innerRadius(innerRadius)
+    .outerRadius(outerRadius)
+    .startAngle(startAngle)
+    .endAngle(endAngle)
+    .cornerRadius(cornerRadius)()
+}

package/src/utils/process-declarative-child.js

@@ -0,0 +1,46 @@
+/**
+ * Processes declarative child objects (intention objects) into rendered functions
+ * Converts { type: 'XAxis', config } into a rendered function
+ *
+ * @param {Object} child - Child object with type and config properties
+ * @param {Object} entity - Chart entity
+ * @param {string} chartTypeName - Chart type name
+ * @param {Object} api - Web API instance
+ * @returns {Function|null}
+ */
+export function processDeclarativeChild(child, entity, chartTypeName, api) {
+  if (
+    child &&
+    typeof child === "object" &&
+    child.type &&
+    child.config !== undefined
+  ) {
+    const chartType = api.getType(chartTypeName)
+    const methodName = `render${child.type}`
+
+    if (chartType?.[methodName]) {
+      // Execute the render method to get the actual component function (e.g., brushFn)
+      const rendered = chartType[methodName](
+        entity,
+        { config: child.config },
+        api,
+      )
+
+      // Inject flag based on the declarative object TYPE
+      // This ensures the returned function has the correct flag for identification
+      if (typeof rendered === "function") {
+        if (child.type === "Brush") rendered.isBrush = true
+        if (child.type === "XAxis" || child.type === "YAxis")
+          rendered.isAxis = true
+        if (child.type === "CartesianGrid") rendered.isGrid = true
+        if (child.type === "Line") rendered.isLine = true
+        if (child.type === "Dots") rendered.isDots = true
+        if (child.type === "Tooltip") rendered.isTooltip = true
+        if (child.type === "Legend") rendered.isLegend = true
+      }
+
+      return rendered
+    }
+  }
+  return child
+}

package/src/utils/scales.js

@@ -0,0 +1,250 @@
+/* eslint-disable no-magic-numbers */
+
+import { extent } from "d3-array"
+import { scaleBand, scaleLinear, scaleTime } from "d3-scale"
+
+import { getDataPointX, getDataPointY, isMultiSeries } from "./data-utils.js"
+
+export function createYScale(data, height, padding, isStacked = false) {
+  let values
+  if (isMultiSeries(data)) {
+    if (isStacked) {
+      // For stacked areas, calculate the sum of all series at each point
+      const allSeriesValues = data.map((series) =>
+        Array.isArray(series.values) ? series.values : [series],
+      )
+      const maxLength = Math.max(...allSeriesValues.map((s) => s.length))
+
+      // Calculate stacked sums for each x position
+      values = []
+      for (let i = 0; i < maxLength; i++) {
+        let sum = 0
+        allSeriesValues.forEach((seriesValues) => {
+          const point = seriesValues[i]
+          if (point) {
+            sum += point.y ?? point.value ?? 0
+          }
+        })
+        values.push(sum)
+      }
+    } else {
+      // For non-stacked (line charts), use all individual values
+      values = data.flatMap((series) =>
+        Array.isArray(series.values)
+          ? series.values.map((v) => v.y ?? v.value ?? 0)
+          : [series.y ?? series.value ?? 0],
+      )
+    }
+  } else {
+    // Single series: extract directly
+    values = data.map((d) => getDataPointY(d))
+  }
+
+  const [minVal, maxVal] = extent(values)
+  // Always start at 0 to avoid visual distortions
+  const min = Math.min(0, minVal ?? 0)
+  const max = maxVal ?? 100
+  return scaleLinear()
+    .domain([min, max])
+    .nice() // Make domain "nice" (round to nice numbers like 1000 instead of 980)
+    .range([height - padding.bottom, padding.top])
+}
+
+export function createXScale(data, width, padding) {
+  // Handle multi-series data (array of series with values)
+  let values
+  if (isMultiSeries(data)) {
+    // Extract all x values from all series
+    values = data.flatMap((series) =>
+      series.values ? series.values.map((v) => v.x ?? v.date) : [],
+    )
+  } else {
+    // Single series: extract directly
+    // getDataPointX returns d.x ?? d.date ?? fallback (index)
+    // So if data has no x/date, it will use index as fallback
+    values = data.map((d, i) => {
+      const xVal = getDataPointX(d, i)
+      // If getDataPointX returns the fallback (index), ensure it's a valid number
+      return xVal != null && !isNaN(xVal) ? xVal : i
+    })
+  }
+
+  // Filter out null/undefined values and ensure we have valid numbers
+  const validValues = values.filter((v) => v != null && !isNaN(v))
+
+  if (validValues.length === 0) {
+    // If no valid values found, use index-based domain
+    // This happens when data has no x/date fields and getDataPointX fails
+    return scaleLinear()
+      .domain([0, Math.max(0, data.length - 1)])
+      .range([padding.left, width - padding.right])
+  }
+
+  const [minVal, maxVal] = extent(validValues)
+  if (minVal == null || maxVal == null || isNaN(minVal) || isNaN(maxVal)) {
+    console.warn(
+      "[createXScale] Invalid extent, using default domain [0, data.length-1]",
+      { minVal, maxVal, values, validValues },
+    )
+    return scaleLinear()
+      .domain([0, data.length - 1])
+      .range([padding.left, width - padding.right])
+  }
+
+  return scaleLinear()
+    .domain([minVal, maxVal])
+    .range([padding.left, width - padding.right])
+}
+
+export function createTimeScale(data, width, padding) {
+  const dates = data.map((d) => new Date(d.date ?? d.x))
+  const [minDate, maxDate] = extent(dates)
+  return scaleTime()
+    .domain([minDate, maxDate])
+    .range([padding.left, width - padding.right])
+}
+
+export function createOrdinalScale(categories, width, padding) {
+  return scaleBand()
+    .domain(categories)
+    .range([padding.left, width - padding.right])
+    .padding(0.1)
+}
+
+/**
+ * Get filtered data based on brush state
+ * @param {any} entity - Chart entity
+ * @returns {any[]} Filtered data array
+ */
+export function getFilteredData(entity) {
+  if (!entity.brush?.enabled || !entity.data) {
+    return entity.data
+  }
+
+  const startIndex = entity.brush.startIndex ?? 0
+  const endIndex = entity.brush.endIndex ?? entity.data.length - 1
+
+  return entity.data.slice(startIndex, endIndex + 1)
+}
+
+/**
+ * Helper to create scales based on chart type
+ * Returns { xScale, yScale }
+ */
+export function createScales(entity, chartType) {
+  // Use filtered data if brush is enabled
+  const isZoomable = chartType === "line" || chartType === "area"
+  const dataForScales = isZoomable ? entity.data : getFilteredData(entity)
+
+  // Area charts use stacked scale only if entity.stacked is true
+  // Default to false (non-stacked) for area charts
+  const isStacked = chartType === "area" && entity.stacked === true
+  const yScale = createYScale(
+    dataForScales,
+    entity.height,
+    entity.padding,
+    isStacked,
+  )
+
+  let xScale
+  if (chartType === "bar") {
+    const categories = dataForScales.map((d) => d.label || d.name || d.category)
+    xScale = createOrdinalScale(categories, entity.width, entity.padding)
+  } else {
+    // Line chart or others that use linear/time scale
+    xScale =
+      entity.xAxisType === "time"
+        ? createTimeScale(dataForScales, entity.width, entity.padding)
+        : createXScale(dataForScales, entity.width, entity.padding)
+  }
+
+  return { xScale, yScale }
+}
+
+/**
+ * @typedef {Object} CartesianContext
+ * @property {import('d3-scale').ScaleBand|import('d3-scale').ScaleLinear|import('d3-scale').ScaleTime} xScale
+ * @property {import('d3-scale').ScaleLinear} yScale
+ * @property {Object} dimensions
+ * @property {number} dimensions.width
+ * @property {number} dimensions.height
+ * @property {Object} dimensions.padding
+ * @property {any} entity
+ */
+
+/**
+ * Create cartesian context with scales, dimensions, and entity
+ * @param {any} entity
+ * @param {string} chartType
+ * @returns {CartesianContext}
+ */
+export function createCartesianContext(entity, chartType) {
+  const { xScale, yScale } = createScales(entity, chartType)
+
+  return {
+    xScale,
+    yScale,
+    dimensions: {
+      width: entity.width,
+      height: entity.height,
+      padding: entity.padding,
+    },
+    entity,
+  }
+}
+
+/**
+ * Calculate X-axis ticks based on data
+ * For few data points (≤15), shows all actual x values
+ * For many data points, uses scale ticks
+ *
+ * @param {any[]} data - Chart data
+ * @param {import('d3-scale').ScaleLinear|import('d3-scale').ScaleTime} xScale - X scale
+ * @returns {number[]|Date[]} Array of tick values
+ */
+export function calculateXTicks(data, xScale) {
+  if (!data || data.length === 0) {
+    return xScale.ticks ? xScale.ticks(5) : xScale.domain()
+  }
+
+  // Extract all unique x values from data using Set for O(n) performance
+  // This avoids O(n²) complexity from includes() in a loop
+  const uniqueXValues = new Set()
+  if (isMultiSeries(data)) {
+    // Multi-series: extract from values arrays
+    data.forEach((series) => {
+      if (series.values) {
+        series.values.forEach((v) => {
+          const xVal = v.x ?? v.date
+          if (xVal != null) {
+            uniqueXValues.add(xVal)
+          }
+        })
+      }
+    })
+  } else {
+    // Single series: extract directly
+    // Use index as fallback when x/date is not present (for categorical data)
+    data.forEach((d, i) => {
+      const xVal = getDataPointX(d, i)
+      if (xVal != null) {
+        uniqueXValues.add(xVal)
+      }
+    })
+  }
+
+  // Convert Set to sorted array
+  const allXValues = Array.from(uniqueXValues).sort((a, b) => a - b)
+
+  // If we have few data points (≤15), show all actual x values
+  // Otherwise use D3's automatic tick calculation (like Recharts)
+  if (xScale.ticks && allXValues.length <= 15) {
+    return allXValues
+  }
+  if (xScale.ticks) {
+    // Let D3 automatically choose optimal ticks (default behavior, like Recharts)
+    // D3 will choose nice intervals automatically based on the scale
+    return xScale.ticks()
+  }
+  return xScale.domain()
+}