@inglorious/charts 1.0.1

package/src/utils/shared-context.js

@@ -0,0 +1,166 @@
+/* eslint-disable no-magic-numbers */
+
+import { parseDimension } from "./data-utils.js"
+import { calculatePadding } from "./padding.js"
+import { createScales } from "./scales.js"
+
+/**
+ * Creates a shared context for composition mode charts.
+ * Calculates scales, dimensions, and provides a context object for child components.
+ *
+ * This function unifies the context creation logic for line, area, and bar charts.
+ * Follows the standard signature pattern: render<Sub>(entity, props, api)
+ *
+ * @param {any} entity - Chart entity with data
+ * @param {Object} props - Configuration options
+ * @param {number|string} [props.width] - Chart width (overrides entity.width)
+ * @param {number|string} [props.height] - Chart height (overrides entity.height)
+ * @param {Object} [props.padding] - Chart padding (overrides calculated padding)
+ * @param {Set<string>|string[]|null} [props.usedDataKeys] - Data keys to use for Y-scale calculation (composition mode)
+ * @param {string} [props.chartType="line"] - Chart type ("line", "area", "bar")
+ * @param {any} api - Web API instance (not used, but follows standard signature)
+ * @returns {Object} Context object with xScale, yScale, dimensions, and entity
+ */
+// eslint-disable-next-line no-unused-vars
+export function createSharedContext(entity, props = {}, api) {
+  if (!entity || !entity.data) {
+    throw new Error("Entity and entity.data are required")
+  }
+
+  // Extract props with defaults
+  const {
+    width: configWidth,
+    height: configHeight,
+    padding: configPadding,
+    usedDataKeys: configDataKeys,
+    chartType = "line",
+    stacked = false,
+  } = props
+
+  // Calculate dimensions
+  const width =
+    parseDimension(configWidth) || parseDimension(entity.width) || 800
+  const height =
+    parseDimension(configHeight) || parseDimension(entity.height) || 400
+  const padding = configPadding || calculatePadding(width, height)
+
+  // Convert dataKeys array to Set if needed
+  const usedDataKeys =
+    configDataKeys instanceof Set
+      ? configDataKeys
+      : Array.isArray(configDataKeys)
+        ? new Set(configDataKeys)
+        : null
+
+  // CRITICAL: Y scale should ALWAYS use original (unfiltered) data
+  // The brush zoom should only affect X-axis, not Y-axis
+  // This ensures consistent Y-axis scale regardless of brush selection
+  // Use original entity data for Y scale calculation (not filtered)
+  const dataForYExtent = entity.data
+
+  // Calculate maximum value for Y-axis scaling (global max across ALL data)
+  const maxValue = getExtent(dataForYExtent, usedDataKeys, stacked)
+
+  // Create data structure for scale calculation
+  // For X scale: use original data (not filtered) to preserve original x/date values
+  // For Y scale: use maxValue calculated from ALL data (not filtered)
+  // This ensures xScale has correct domain based on original data, and yScale has [0, maxValue]
+  // The brush zoom will be applied later by adjusting xScale.domain([startIndex, endIndex])
+  // Note: dataForYScale is just a placeholder structure for createYScale
+  const dataForYScale = dataForYExtent.map((d, i) => ({
+    x: i,
+    y: maxValue,
+  }))
+
+  // Create entities with correct data for each scale
+  // X scale uses original data to preserve x/date values
+  const entityForXScale = {
+    ...entity,
+    data: entity.data, // Use original data for X scale
+    width,
+    height,
+    padding,
+  }
+
+  // Y scale uses transformed data with maxValue
+  const entityForYScale = {
+    ...entity,
+    data: dataForYScale,
+    width,
+    height,
+    padding,
+  }
+
+  // Create scales separately: X scale uses original data, Y scale uses transformed data
+  // For X scale, we need to ensure it uses original data even if brush is enabled
+  // So we temporarily disable brush filtering for X scale creation
+  const entityForXScaleNoBrush = {
+    ...entityForXScale,
+    brush: entityForXScale.brush
+      ? { ...entityForXScale.brush, enabled: false }
+      : undefined,
+  }
+  const { xScale } = createScales(entityForXScaleNoBrush, chartType)
+  const { yScale } = createScales(entityForYScale, chartType)
+
+  // Create context with the correct scales
+  const context = {
+    xScale,
+    yScale,
+    dimensions: { width, height, padding },
+    entity,
+  }
+
+  // Return enhanced context with original entity reference
+  return {
+    ...context,
+    dimensions: { width, height, padding },
+    entity, // Keep reference to original entity (not transformed data)
+    chartType, // Include chartType in context for lazy components
+  }
+}
+
+/**
+ * Calculates the maximum value (extent) from entity data.
+ * If dataKeys are provided (composition mode), only considers those keys.
+ * Otherwise considers all numeric values (config-first mode).
+ *
+ * @param {any[]} data - Chart data array
+ * @param {Set<string>|null} usedDataKeys - Set of data keys to consider (composition mode)
+ * @returns {number} Maximum value found
+ */
+function getExtent(data, usedDataKeys, stacked = false) {
+  if (!data || data.length === 0) return 0
+
+  const values = data.flatMap((d) => {
+    if (usedDataKeys && usedDataKeys.size > 0) {
+      // Composition mode: only use values from dataKeys used in lines/areas
+      // If stacked, use the sum across keys per datum to determine max Y.
+      const keys = Array.from(usedDataKeys)
+      if (stacked) {
+        const sum = keys.reduce((acc, dataKey) => {
+          const value = d[dataKey]
+          return acc + (typeof value === "number" ? value : 0)
+        }, 0)
+        return [sum].filter((v) => v > 0)
+      }
+
+      return keys
+        .map((dataKey) => {
+          const value = d[dataKey]
+          return typeof value === "number" ? value : 0
+        })
+        .filter((v) => v > 0)
+    } else {
+      // Config-first mode: use all numeric values (excluding name, x, date)
+      return Object.entries(d)
+        .filter(
+          ([key, value]) =>
+            !["name", "x", "date"].includes(key) && typeof value === "number",
+        )
+        .map(([, value]) => value)
+    }
+  })
+
+  return values.length > 0 ? Math.max(...values) : 0
+}

package/src/utils/shared-context.test.js

@@ -0,0 +1,237 @@
+/**
+ * @vitest-environment jsdom
+ */
+import { describe, expect, it } from "vitest"
+
+import { createSharedContext } from "./shared-context.js"
+
+describe("createSharedContext", () => {
+  const mockApi = {}
+
+  describe("basic functionality", () => {
+    it("should create context with default dimensions", () => {
+      const entity = {
+        id: "test",
+        type: "line",
+        data: [
+          { name: "Jan", value: 100 },
+          { name: "Feb", value: 200 },
+        ],
+      }
+
+      const context = createSharedContext(entity, {}, mockApi)
+
+      expect(context.xScale).toBeDefined()
+      expect(context.yScale).toBeDefined()
+      expect(context.dimensions.width).toBe(800)
+      expect(context.dimensions.height).toBe(400)
+      expect(context.dimensions.padding).toBeDefined()
+      expect(context.entity).toBe(entity)
+    })
+
+    it("should use entity dimensions if provided", () => {
+      const entity = {
+        id: "test",
+        type: "line",
+        data: [{ value: 100 }],
+        width: 1000,
+        height: 500,
+      }
+
+      const context = createSharedContext(entity, {}, mockApi)
+
+      expect(context.dimensions.width).toBe(1000)
+      expect(context.dimensions.height).toBe(500)
+    })
+
+    it("should override dimensions from props", () => {
+      const entity = {
+        id: "test",
+        type: "line",
+        data: [{ value: 100 }],
+        width: 800,
+        height: 400,
+      }
+
+      const context = createSharedContext(
+        entity,
+        { width: 1200, height: 600 },
+        mockApi,
+      )
+
+      expect(context.dimensions.width).toBe(1200)
+      expect(context.dimensions.height).toBe(600)
+    })
+
+    it("should throw error if entity is missing", () => {
+      expect(() => {
+        createSharedContext(null, {}, mockApi)
+      }).toThrow("Entity and entity.data are required")
+    })
+
+    it("should throw error if entity.data is missing", () => {
+      expect(() => {
+        createSharedContext({ id: "test" }, {}, mockApi)
+      }).toThrow("Entity and entity.data are required")
+    })
+  })
+
+  describe("Y-scale calculation", () => {
+    it("should calculate Y scale from all numeric values (config-first mode)", () => {
+      const entity = {
+        id: "test",
+        type: "line",
+        data: [
+          { name: "Jan", value: 100, other: 50 },
+          { name: "Feb", value: 200, other: 75 },
+          { name: "Mar", value: 150, other: 100 },
+        ],
+      }
+
+      const context = createSharedContext(entity, {}, mockApi)
+
+      // Y scale should include max of all numeric values (200 from value, 100 from other)
+      const domain = context.yScale.domain()
+      expect(domain[1]).toBeGreaterThanOrEqual(200)
+    })
+
+    it("should calculate Y scale from specific dataKeys (composition mode)", () => {
+      const entity = {
+        id: "test",
+        type: "line",
+        data: [
+          { name: "Jan", productA: 100, productB: 200 },
+          { name: "Feb", productA: 150, productB: 250 },
+        ],
+      }
+
+      const context = createSharedContext(
+        entity,
+        { usedDataKeys: new Set(["productA"]) },
+        mockApi,
+      )
+
+      // Y scale should only consider productA values (max 150)
+      const domain = context.yScale.domain()
+      expect(domain[1]).toBeGreaterThanOrEqual(150)
+      expect(domain[1]).toBeLessThan(200) // Should not include productB
+    })
+
+    it("should handle empty data", () => {
+      const entity = {
+        id: "test",
+        type: "line",
+        data: [],
+      }
+
+      const context = createSharedContext(entity, {}, mockApi)
+
+      expect(context.yScale).toBeDefined()
+      const domain = context.yScale.domain()
+      expect(domain[1]).toBeGreaterThanOrEqual(0)
+    })
+
+    it("should calculate Y scale from sum of dataKeys when stacked is true", () => {
+      const entity = {
+        id: "test",
+        type: "area",
+        data: [
+          { name: "Jan", uv: 4000, pv: 2400, amt: 2400 },
+          { name: "Feb", uv: 3000, pv: 1398, amt: 2210 },
+        ],
+      }
+
+      const context = createSharedContext(
+        entity,
+        {
+          usedDataKeys: ["uv", "pv", "amt"],
+          stacked: true,
+          chartType: "area",
+        },
+        mockApi,
+      )
+
+      const domain = context.yScale.domain()
+      // Jan sum is 8800, Feb sum is 6608
+      expect(domain[1]).toBeGreaterThanOrEqual(8800)
+    })
+  })
+
+  describe("chart types", () => {
+    it("should create context for line chart", () => {
+      const entity = {
+        id: "test",
+        type: "line",
+        data: [{ value: 100 }],
+      }
+
+      const context = createSharedContext(
+        entity,
+        { chartType: "line" },
+        mockApi,
+      )
+
+      expect(context.xScale).toBeDefined()
+      expect(context.yScale).toBeDefined()
+    })
+
+    it("should create context for area chart", () => {
+      const entity = {
+        id: "test",
+        type: "area",
+        data: [{ value: 100 }],
+      }
+
+      const context = createSharedContext(
+        entity,
+        { chartType: "area" },
+        mockApi,
+      )
+
+      expect(context.xScale).toBeDefined()
+      expect(context.yScale).toBeDefined()
+    })
+  })
+
+  describe("dataKeys handling", () => {
+    it("should accept dataKeys as Set", () => {
+      const entity = {
+        id: "test",
+        type: "line",
+        data: [
+          { name: "Jan", productA: 100, productB: 200 },
+          { name: "Feb", productA: 150, productB: 250 },
+        ],
+      }
+
+      const context = createSharedContext(
+        entity,
+        { usedDataKeys: new Set(["productA", "productB"]) },
+        mockApi,
+      )
+
+      expect(context.yScale).toBeDefined()
+      const domain = context.yScale.domain()
+      expect(domain[1]).toBeGreaterThanOrEqual(250)
+    })
+
+    it("should accept dataKeys as array", () => {
+      const entity = {
+        id: "test",
+        type: "line",
+        data: [
+          { name: "Jan", productA: 100, productB: 200 },
+          { name: "Feb", productA: 150, productB: 250 },
+        ],
+      }
+
+      const context = createSharedContext(
+        entity,
+        { usedDataKeys: ["productA"] },
+        mockApi,
+      )
+
+      expect(context.yScale).toBeDefined()
+    })
+  })
+})

package/src/utils/tooltip-handlers.js

@@ -0,0 +1,129 @@
+/**
+ * Tooltip event handlers utilities
+ * Creates reusable onMouseEnter, onMouseLeave, and onMouseMove handlers for chart elements
+ */
+
+// Tooltip offset from cursor position
+const TOOLTIP_OFFSET = 15
+// Estimated tooltip width (can be adjusted based on actual tooltip size)
+const TOOLTIP_ESTIMATED_WIDTH = 140
+// Estimated tooltip height
+const TOOLTIP_ESTIMATED_HEIGHT = 60
+
+/**
+ * Creates tooltip event handlers for chart elements
+ * @param {Object} params
+ * @param {any} params.entity - Chart entity
+ * @param {import('@inglorious/web').Api} params.api - Web API instance
+ * @param {Object} params.tooltipData - Tooltip data
+ * @param {string} params.tooltipData.label - Tooltip label
+ * @param {number} params.tooltipData.value - Tooltip value
+ * @param {string} params.tooltipData.color - Tooltip color
+ * @returns {{ onMouseEnter: Function, onMouseLeave: Function }}
+ */
+export function createTooltipHandlers({ entity, api, tooltipData }) {
+  const onMouseEnter = (e) => {
+    if (!entity.showTooltip) return
+    const svgElement = e.currentTarget.closest("svg")
+    const svgRect = svgElement.getBoundingClientRect()
+    const containerElement =
+      svgElement.closest(".iw-chart") || svgElement.parentElement
+    const containerRect = containerElement.getBoundingClientRect()
+
+    const relativeX = e.clientX - svgRect.left
+    const relativeY = e.clientY - svgRect.top
+
+    const { x, y } = calculateTooltipPosition(
+      relativeX,
+      relativeY,
+      svgRect,
+      containerRect,
+    )
+
+    api.notify(`#${entity.id}:tooltipShow`, {
+      label: tooltipData.label,
+      value: tooltipData.value,
+      color: tooltipData.color,
+      x,
+      y,
+    })
+  }
+
+  const onMouseLeave = () => {
+    if (!entity.showTooltip) return
+    api.notify(`#${entity.id}:tooltipHide`)
+  }
+
+  return { onMouseEnter, onMouseLeave }
+}
+
+/**
+ * Creates a mouse move handler for tooltip positioning
+ * @param {Object} params
+ * @param {any} params.entity - Chart entity
+ * @param {import('@inglorious/web').Api} params.api - Web API instance
+ * @returns {Function} Mouse move event handler
+ */
+export function createTooltipMoveHandler({ entity, api }) {
+  return (e) => {
+    if (!entity.tooltip) return
+    const svgElement = e.currentTarget
+    const svgRect = svgElement.getBoundingClientRect()
+    const containerElement =
+      svgElement.closest(".iw-chart") || svgElement.parentElement
+    const containerRect = containerElement.getBoundingClientRect()
+
+    const relativeX = e.clientX - svgRect.left
+    const relativeY = e.clientY - svgRect.top
+
+    const { x, y } = calculateTooltipPosition(
+      relativeX,
+      relativeY,
+      svgRect,
+      containerRect,
+    )
+
+    api.notify(`#${entity.id}:tooltipMove`, {
+      x,
+      y,
+    })
+  }
+}
+
+/**
+ * Calculates tooltip position, adjusting if it would be cut off
+ * @param {number} x - X position relative to SVG
+ * @param {number} y - Y position relative to SVG
+ * @param {DOMRect} svgRect - SVG bounding rect
+ * @param {DOMRect} containerRect - Container bounding rect (for overflow check)
+ * @returns {{ x: number, y: number }}
+ */
+function calculateTooltipPosition(x, y, svgRect, containerRect) {
+  let tooltipX = x + TOOLTIP_OFFSET
+  let tooltipY = y - TOOLTIP_OFFSET
+
+  // Check if tooltip would be cut off on the right side
+  const tooltipRightEdge = svgRect.left + tooltipX + TOOLTIP_ESTIMATED_WIDTH
+  const containerRightEdge = containerRect.right
+
+  if (tooltipRightEdge > containerRightEdge) {
+    // Position tooltip to the left of cursor instead
+    tooltipX = x - TOOLTIP_ESTIMATED_WIDTH - TOOLTIP_OFFSET
+    // Ensure it doesn't go negative
+    const MIN_X_POSITION = 0
+    if (tooltipX < MIN_X_POSITION) {
+      tooltipX = TOOLTIP_OFFSET
+    }
+  }
+
+  // Check if tooltip would be cut off on the bottom
+  const tooltipBottomEdge = svgRect.top + tooltipY + TOOLTIP_ESTIMATED_HEIGHT
+  const containerBottomEdge = containerRect.bottom
+
+  if (tooltipBottomEdge > containerBottomEdge) {
+    // Position tooltip above cursor
+    tooltipY = y - TOOLTIP_ESTIMATED_HEIGHT - TOOLTIP_OFFSET
+  }
+
+  return { x: tooltipX, y: tooltipY }
+}