@databricks/appkit-ui 0.2.0 → 0.4.0

package/dist/js/arrow/arrow-client.js.map

@@ -1 +1 @@
-{"version":3,"file":"arrow-client.js","names":["xField"],"sources":["../../../src/js/arrow/arrow-client.ts"],"sourcesContent":["import type { Field, Table } from \"apache-arrow\";\nimport {\n  DATE_FIELD_PATTERNS,\n  METADATA_DATE_PATTERNS,\n  NAME_FIELD_PATTERNS,\n} from \"../constants\";\nimport {\n  getArrowModule,\n  initializeTypeIdSets,\n  getTypeIdSets,\n  getDecimalTypeId,\n} from \"./lazy-arrow\";\n\n// Re-export for backward compatibility\nexport { DATE_FIELD_PATTERNS, NAME_FIELD_PATTERNS };\n\n// Re-export Table type for consumers\nexport type { Table, Field };\n\nexport class ArrowClient {\n  /**\n   * Processes an Arrow IPC buffer into a Table.\n   * Lazily loads the Apache Arrow library on first use.\n   *\n   * @param buffer - The Arrow IPC format buffer\n   * @returns Promise resolving to an Arrow Table\n   */\n  static async processArrowBuffer(buffer: Uint8Array): Promise<Table> {\n    try {\n      const arrow = await getArrowModule();\n      // Initialize type ID sets now that Arrow is loaded\n      await initializeTypeIdSets();\n      return arrow.tableFromIPC(buffer);\n    } catch (error) {\n      throw new Error(\n        `Failed to process Arrow buffer: ${\n          error instanceof Error ? error.message : \"Unknown error\"\n        }`,\n      );\n    }\n  }\n\n  static async fetchAndProcessArrow(\n    url: string,\n    headers?: Record<string, string>,\n  ): Promise<Table> {\n    try {\n      const buffer = await ArrowClient.fetchArrow(url, headers);\n\n      return ArrowClient.processArrowBuffer(buffer);\n    } catch (error) {\n      throw new Error(\n        `Failed to fetch Arrow data: ${\n          error instanceof Error ? error.message : \"Unknown error\"\n        }`,\n      );\n    }\n  }\n\n  static extractArrowFields(table: Table) {\n    return table.schema.fields.map((field: Field) => {\n      return {\n        name: field.name,\n        type: field.type,\n      };\n    });\n  }\n\n  static extractArrowColumns(table: Table): Record<string, any> {\n    const cols: Record<string, any> = {};\n\n    for (const field of table.schema.fields) {\n      const child = table.getChild(field.name);\n\n      if (child) {\n        cols[field.name] = child.toArray();\n      }\n    }\n\n    return cols;\n  }\n\n  /**\n   * Extracts chart data from Arrow table.\n   * Uses get(i) to properly handle complex types like Decimal128.\n   * Applies decimal scaling for DECIMAL types.\n   *\n   * Note: This method assumes Arrow has been loaded (via processArrowBuffer).\n   *\n   * @returns xData for axis, yDataMap for series data\n   */\n  static extractChartData(table: Table, xKey: string, yKeys: string[]) {\n    // Early exit for empty tables - return cached empty object\n    if (table.numRows === 0) {\n      return EMPTY_RESULT;\n    }\n\n    // Get the Decimal type ID (Arrow must be loaded to have a Table)\n    const decimalType = getDecimalTypeId();\n\n    // Build a map of field name -> pre-computed divisor (10^scale) for decimal types\n    const decimalDivisors = new Map<string, number>();\n    for (const field of table.schema.fields) {\n      if (field.typeId === decimalType) {\n        const decType = field.type as { scale: number };\n        if (typeof decType.scale === \"number\") {\n          // Pre-compute divisor once per field instead of per-column call\n          decimalDivisors.set(field.name, 10 ** decType.scale);\n        }\n      }\n    }\n\n    // Extract X column using proper value extraction\n    const xCol = table.getChild(xKey);\n    const xData = extractColumnValues(xCol, decimalDivisors.get(xKey));\n\n    // Extract Y columns using proper value extraction\n    const yDataMap: Record<string, (string | number)[]> = {};\n    for (let i = 0; i < yKeys.length; i++) {\n      const key = yKeys[i];\n      const col = table.getChild(key);\n      yDataMap[key] = extractColumnValues(col, decimalDivisors.get(key));\n    }\n\n    return { xData, yDataMap };\n  }\n\n  /**\n   * Automatically detect which fields to use for chart axes from an Arrow table\n   * Uses the schema's type information for accurate field detection\n   *\n   * Note: This method assumes Arrow has been loaded (via processArrowBuffer).\n   *\n   * @param table - Arrow Table to analyze\n   * @param orientation - Chart orientation (\"vertical\" for time-series, \"horizontal\" for categorical)\n   * @returns Object containing the detected fields\n   * @example\n   * // Time-series data\n   * detectFieldsFromArrow(timeSeriesTable)\n   * // { xField: \"date\", yFields: [\"revenue\", \"cost\"], chartType: \"timeseries\" }\n   *\n   * // Categorical data\n   * detectFieldsFromArrow(categoricalTable)\n   * // { xField: \"app_name\", yFields: [\"totalSpend\"], chartType: \"categorical\" }\n   */\n  static detectFieldsFromArrow(\n    table: Table,\n    orientation?: \"vertical\" | \"horizontal\",\n  ): DetectedFields & { chartType: \"timeseries\" | \"categorical\" } {\n    const fields = table.schema.fields;\n\n    if (fields.length === 0) {\n      return { xField: \"x\", yFields: [\"y\"], chartType: \"categorical\" };\n    }\n\n    const fieldNames = fields.map((f) => f.name);\n\n    // Get type ID sets (Arrow must be loaded to have a Table)\n    const typeIdSets = getTypeIdSets();\n\n    // Categorize fields by their Arrow type\n    const temporalFields: string[] = [];\n    const numericFields: string[] = [];\n    const stringFields: string[] = [];\n\n    for (const field of fields) {\n      const typeId = field.typeId;\n\n      if (typeIdSets.temporal.has(typeId)) {\n        temporalFields.push(field.name);\n      } else if (typeIdSets.numeric.has(typeId)) {\n        numericFields.push(field.name);\n      } else if (typeIdSets.string.has(typeId)) {\n        stringFields.push(field.name);\n      }\n    }\n\n    // Detect name/category fields: string fields matching name patterns\n    let nameFields = stringFields.filter((name) =>\n      NAME_FIELD_PATTERNS.some((pattern) =>\n        name.toLowerCase().includes(pattern),\n      ),\n    );\n\n    // Fallback: use any string field that doesn't end with _id\n    if (nameFields.length === 0) {\n      nameFields = stringFields.filter(\n        (name) => !name.toLowerCase().endsWith(\"_id\"),\n      );\n    }\n\n    // Separate temporal fields into \"chart-worthy\" dates vs metadata dates\n    const chartDateFields = temporalFields.filter(\n      (name) =>\n        !METADATA_DATE_PATTERNS.some((pattern) =>\n          name.toLowerCase().includes(pattern),\n        ),\n    );\n    const metadataDateFields = temporalFields.filter((name) =>\n      METADATA_DATE_PATTERNS.some((pattern) =>\n        name.toLowerCase().includes(pattern),\n      ),\n    );\n\n    // Also check string fields for date patterns (but not metadata patterns)\n    const stringDateFields = stringFields.filter(\n      (name) =>\n        DATE_FIELD_PATTERNS.some((pattern) =>\n          name.toLowerCase().includes(pattern),\n        ) &&\n        !METADATA_DATE_PATTERNS.some((pattern) =>\n          name.toLowerCase().includes(pattern),\n        ),\n    );\n\n    const primaryDateFields = [...chartDateFields, ...stringDateFields];\n\n    // Determine chart type: if we have good date fields for charting, it's time-series\n    // If we only have metadata dates (like createdAt) and name fields, it's categorical\n    const isTimeSeries =\n      primaryDateFields.length > 0 && orientation !== \"horizontal\";\n    const isCategorical =\n      nameFields.length > 0 &&\n      (primaryDateFields.length === 0 || orientation === \"horizontal\");\n\n    if (orientation === \"horizontal\" || isCategorical) {\n      // Categorical: x is name/category field, y is numeric field\n      const xField =\n        nameFields[0] ||\n        primaryDateFields[0] ||\n        metadataDateFields[0] ||\n        fieldNames[0];\n      const yFields =\n        numericFields.length > 0\n          ? numericFields\n          : fieldNames.filter((k) => k !== xField);\n      return { xField, yFields, chartType: \"categorical\" };\n    }\n\n    // Time-series (default): x is date/time field, y is numeric field\n    const xField =\n      primaryDateFields[0] ||\n      metadataDateFields[0] ||\n      nameFields[0] ||\n      fieldNames[0];\n    const yFields =\n      numericFields.length > 0\n        ? numericFields\n        : fieldNames.filter((k) => k !== xField);\n    return {\n      xField,\n      yFields,\n      chartType: isTimeSeries ? \"timeseries\" : \"categorical\",\n    };\n  }\n\n  static async fetchArrow(\n    url: string,\n    headers?: Record<string, string>,\n  ): Promise<Uint8Array> {\n    try {\n      const response = await fetch(url, {\n        headers: { \"Content-Type\": \"application/octet-stream\", ...headers },\n      });\n\n      if (!response.ok) {\n        throw new Error(`HTTP ${response.status}: ${response.statusText}`);\n      }\n\n      const buffer = await response.arrayBuffer();\n\n      return new Uint8Array(buffer);\n    } catch (error) {\n      throw new Error(\n        `Failed to fetch Arrow data: ${\n          error instanceof Error ? error.message : \"Unknown error\"\n        }`,\n      );\n    }\n  }\n}\n\nexport interface DetectedFields {\n  /** X field */\n  xField: string;\n  /** Y fields */\n  yFields: string[];\n}\n\n// ============================================================================\n// Utility Functions\n// ============================================================================\n\n// Cached empty result to avoid allocations\nconst EMPTY_RESULT: {\n  xData: (string | number)[];\n  yDataMap: Record<string, (string | number)[]>;\n} = {\n  xData: [],\n  yDataMap: {},\n};\n\n/**\n * Extracts values from an Arrow Vector properly.\n * Uses get(i) to handle complex types like Decimal128 correctly.\n * toArray() doesn't work properly for Decimal types - it returns raw bytes.\n *\n * @param col - The Arrow column/vector\n * @param divisor - Pre-computed divisor for DECIMAL types (10^scale)\n */\nfunction extractColumnValues(\n  col: { length: number; get: (i: number) => unknown } | null | undefined,\n  divisor?: number,\n): (string | number)[] {\n  if (!col) return [];\n\n  // Pre-allocate array for better performance with large datasets\n  const len = col.length;\n  const result: (string | number)[] = new Array(len);\n\n  for (let i = 0; i < len; i++) {\n    const val = col.get(i);\n    if (val === null || val === undefined) {\n      result[i] = 0;\n    } else if (typeof val === \"bigint\") {\n      // Apply decimal scaling if needed\n      const num = Number(val);\n      result[i] = divisor !== undefined ? num / divisor : num;\n    } else if (typeof val === \"number\") {\n      // Apply decimal scaling if needed\n      result[i] = divisor !== undefined ? val / divisor : val;\n    } else if (typeof val === \"string\") {\n      result[i] = val;\n    } else {\n      // For complex types (like Decimal), try to convert to number\n      const num = Number(val);\n      result[i] = divisor !== undefined ? num / divisor : num;\n    }\n  }\n  return result;\n}\n"],"mappings":"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"}
+{"version":3,"file":"arrow-client.js","names":[],"sources":["../../../src/js/arrow/arrow-client.ts"],"sourcesContent":["import type { Field, Table } from \"apache-arrow\";\nimport {\n  DATE_FIELD_PATTERNS,\n  METADATA_DATE_PATTERNS,\n  NAME_FIELD_PATTERNS,\n} from \"../constants\";\nimport {\n  getArrowModule,\n  initializeTypeIdSets,\n  getTypeIdSets,\n  getDecimalTypeId,\n} from \"./lazy-arrow\";\n\n// Re-export for backward compatibility\nexport { DATE_FIELD_PATTERNS, NAME_FIELD_PATTERNS };\n\n// Re-export Table type for consumers\nexport type { Table, Field };\n\nexport class ArrowClient {\n  /**\n   * Processes an Arrow IPC buffer into a Table.\n   * Lazily loads the Apache Arrow library on first use.\n   *\n   * @param buffer - The Arrow IPC format buffer\n   * @returns Promise resolving to an Arrow Table\n   */\n  static async processArrowBuffer(buffer: Uint8Array): Promise<Table> {\n    try {\n      const arrow = await getArrowModule();\n      // Initialize type ID sets now that Arrow is loaded\n      await initializeTypeIdSets();\n      return arrow.tableFromIPC(buffer);\n    } catch (error) {\n      throw new Error(\n        `Failed to process Arrow buffer: ${\n          error instanceof Error ? error.message : \"Unknown error\"\n        }`,\n      );\n    }\n  }\n\n  /**\n   * Fetches Arrow data from a URL and processes it into a Table.\n   * Convenience method that combines fetchArrow and processArrowBuffer.\n   *\n   * @param url - URL to fetch Arrow data from\n   * @param headers - Optional HTTP headers to include in the request\n   * @returns Promise resolving to an Arrow Table\n   * @example\n   * ```typescript\n   * const table = await ArrowClient.fetchAndProcessArrow('/api/data/arrow');\n   * console.log(`Loaded ${table.numRows} rows`);\n   * ```\n   */\n  static async fetchAndProcessArrow(\n    url: string,\n    headers?: Record<string, string>,\n  ): Promise<Table> {\n    try {\n      const buffer = await ArrowClient.fetchArrow(url, headers);\n\n      return ArrowClient.processArrowBuffer(buffer);\n    } catch (error) {\n      throw new Error(\n        `Failed to fetch Arrow data: ${\n          error instanceof Error ? error.message : \"Unknown error\"\n        }`,\n      );\n    }\n  }\n\n  /**\n   * Extracts field metadata (name and type) from an Arrow Table.\n   *\n   * @param table - Arrow Table to extract fields from\n   * @returns Array of field metadata objects\n   * @example\n   * ```typescript\n   * const fields = ArrowClient.extractArrowFields(table);\n   * // [{ name: \"date\", type: Date32 }, { name: \"value\", type: Float64 }]\n   * ```\n   */\n  static extractArrowFields(table: Table) {\n    return table.schema.fields.map((field: Field) => {\n      return {\n        name: field.name,\n        type: field.type,\n      };\n    });\n  }\n\n  /**\n   * Extracts all columns from an Arrow Table as JavaScript arrays.\n   * Each column is converted to a native JavaScript array.\n   *\n   * @param table - Arrow Table to extract columns from\n   * @returns Object mapping column names to arrays\n   * @example\n   * ```typescript\n   * const columns = ArrowClient.extractArrowColumns(table);\n   * // { date: [\"2024-01-01\", \"2024-01-02\"], value: [100, 200] }\n   * ```\n   */\n  static extractArrowColumns(table: Table): Record<string, any> {\n    const cols: Record<string, any> = {};\n\n    for (const field of table.schema.fields) {\n      const child = table.getChild(field.name);\n\n      if (child) {\n        cols[field.name] = child.toArray();\n      }\n    }\n\n    return cols;\n  }\n\n  /**\n   * Extracts chart data from Arrow table.\n   * Uses get(i) to properly handle complex types like Decimal128.\n   * Applies decimal scaling for DECIMAL types.\n   *\n   * Note: This method assumes Arrow has been loaded (via processArrowBuffer).\n   *\n   * @returns xData for axis, yDataMap for series data\n   */\n  static extractChartData(table: Table, xKey: string, yKeys: string[]) {\n    // Early exit for empty tables - return cached empty object\n    if (table.numRows === 0) {\n      return EMPTY_RESULT;\n    }\n\n    // Get the Decimal type ID (Arrow must be loaded to have a Table)\n    const decimalType = getDecimalTypeId();\n\n    // Build a map of field name -> pre-computed divisor (10^scale) for decimal types\n    const decimalDivisors = new Map<string, number>();\n    for (const field of table.schema.fields) {\n      if (field.typeId === decimalType) {\n        const decType = field.type as { scale: number };\n        if (typeof decType.scale === \"number\") {\n          // Pre-compute divisor once per field instead of per-column call\n          decimalDivisors.set(field.name, 10 ** decType.scale);\n        }\n      }\n    }\n\n    // Extract X column using proper value extraction\n    const xCol = table.getChild(xKey);\n    const xData = extractColumnValues(xCol, decimalDivisors.get(xKey));\n\n    // Extract Y columns using proper value extraction\n    const yDataMap: Record<string, (string | number)[]> = {};\n    for (let i = 0; i < yKeys.length; i++) {\n      const key = yKeys[i];\n      const col = table.getChild(key);\n      yDataMap[key] = extractColumnValues(col, decimalDivisors.get(key));\n    }\n\n    return { xData, yDataMap };\n  }\n\n  /**\n   * Automatically detect which fields to use for chart axes from an Arrow table\n   * Uses the schema's type information for accurate field detection\n   *\n   * Note: This method assumes Arrow has been loaded (via processArrowBuffer).\n   *\n   * @param table - Arrow Table to analyze\n   * @param orientation - Chart orientation (\"vertical\" for time-series, \"horizontal\" for categorical)\n   * @returns Object containing the detected fields\n   * @example\n   * // Time-series data\n   * detectFieldsFromArrow(timeSeriesTable)\n   * // { xField: \"date\", yFields: [\"revenue\", \"cost\"], chartType: \"timeseries\" }\n   *\n   * // Categorical data\n   * detectFieldsFromArrow(categoricalTable)\n   * // { xField: \"app_name\", yFields: [\"totalSpend\"], chartType: \"categorical\" }\n   */\n  static detectFieldsFromArrow(\n    table: Table,\n    orientation?: \"vertical\" | \"horizontal\",\n  ): DetectedFields & { chartType: \"timeseries\" | \"categorical\" } {\n    const fields = table.schema.fields;\n\n    if (fields.length === 0) {\n      return { xField: \"x\", yFields: [\"y\"], chartType: \"categorical\" };\n    }\n\n    const fieldNames = fields.map((f) => f.name);\n\n    // Get type ID sets (Arrow must be loaded to have a Table)\n    const typeIdSets = getTypeIdSets();\n\n    // Categorize fields by their Arrow type\n    const temporalFields: string[] = [];\n    const numericFields: string[] = [];\n    const stringFields: string[] = [];\n\n    for (const field of fields) {\n      const typeId = field.typeId;\n\n      if (typeIdSets.temporal.has(typeId)) {\n        temporalFields.push(field.name);\n      } else if (typeIdSets.numeric.has(typeId)) {\n        numericFields.push(field.name);\n      } else if (typeIdSets.string.has(typeId)) {\n        stringFields.push(field.name);\n      }\n    }\n\n    // Detect name/category fields: string fields matching name patterns\n    let nameFields = stringFields.filter((name) =>\n      NAME_FIELD_PATTERNS.some((pattern) =>\n        name.toLowerCase().includes(pattern),\n      ),\n    );\n\n    // Fallback: use any string field that doesn't end with _id\n    if (nameFields.length === 0) {\n      nameFields = stringFields.filter(\n        (name) => !name.toLowerCase().endsWith(\"_id\"),\n      );\n    }\n\n    // Separate temporal fields into \"chart-worthy\" dates vs metadata dates\n    const chartDateFields = temporalFields.filter(\n      (name) =>\n        !METADATA_DATE_PATTERNS.some((pattern) =>\n          name.toLowerCase().includes(pattern),\n        ),\n    );\n    const metadataDateFields = temporalFields.filter((name) =>\n      METADATA_DATE_PATTERNS.some((pattern) =>\n        name.toLowerCase().includes(pattern),\n      ),\n    );\n\n    // Also check string fields for date patterns (but not metadata patterns)\n    const stringDateFields = stringFields.filter(\n      (name) =>\n        DATE_FIELD_PATTERNS.some((pattern) =>\n          name.toLowerCase().includes(pattern),\n        ) &&\n        !METADATA_DATE_PATTERNS.some((pattern) =>\n          name.toLowerCase().includes(pattern),\n        ),\n    );\n\n    const primaryDateFields = [...chartDateFields, ...stringDateFields];\n\n    // Determine chart type: if we have good date fields for charting, it's time-series\n    // If we only have metadata dates (like createdAt) and name fields, it's categorical\n    const isTimeSeries =\n      primaryDateFields.length > 0 && orientation !== \"horizontal\";\n    const isCategorical =\n      nameFields.length > 0 &&\n      (primaryDateFields.length === 0 || orientation === \"horizontal\");\n\n    if (orientation === \"horizontal\" || isCategorical) {\n      // Categorical: x is name/category field, y is numeric field\n      const xField =\n        nameFields[0] ||\n        primaryDateFields[0] ||\n        metadataDateFields[0] ||\n        fieldNames[0];\n      const yFields =\n        numericFields.length > 0\n          ? numericFields\n          : fieldNames.filter((k) => k !== xField);\n      return { xField, yFields, chartType: \"categorical\" };\n    }\n\n    // Time-series (default): x is date/time field, y is numeric field\n    const xField =\n      primaryDateFields[0] ||\n      metadataDateFields[0] ||\n      nameFields[0] ||\n      fieldNames[0];\n    const yFields =\n      numericFields.length > 0\n        ? numericFields\n        : fieldNames.filter((k) => k !== xField);\n    return {\n      xField,\n      yFields,\n      chartType: isTimeSeries ? \"timeseries\" : \"categorical\",\n    };\n  }\n\n  /**\n   * Fetches raw Arrow IPC data from a URL.\n   *\n   * @param url - URL to fetch Arrow data from\n   * @param headers - Optional HTTP headers to include in the request\n   * @returns Promise resolving to the raw Arrow buffer as Uint8Array\n   * @example\n   * ```typescript\n   * const buffer = await ArrowClient.fetchArrow('/api/data/arrow');\n   * const table = await ArrowClient.processArrowBuffer(buffer);\n   * ```\n   */\n  static async fetchArrow(\n    url: string,\n    headers?: Record<string, string>,\n  ): Promise<Uint8Array> {\n    try {\n      const response = await fetch(url, {\n        headers: { \"Content-Type\": \"application/octet-stream\", ...headers },\n      });\n\n      if (!response.ok) {\n        throw new Error(`HTTP ${response.status}: ${response.statusText}`);\n      }\n\n      const buffer = await response.arrayBuffer();\n\n      return new Uint8Array(buffer);\n    } catch (error) {\n      throw new Error(\n        `Failed to fetch Arrow data: ${\n          error instanceof Error ? error.message : \"Unknown error\"\n        }`,\n      );\n    }\n  }\n}\n\nexport interface DetectedFields {\n  /** X field */\n  xField: string;\n  /** Y fields */\n  yFields: string[];\n}\n\n// ============================================================================\n// Utility Functions\n// ============================================================================\n\n// Cached empty result to avoid allocations\nconst EMPTY_RESULT: {\n  xData: (string | number)[];\n  yDataMap: Record<string, (string | number)[]>;\n} = {\n  xData: [],\n  yDataMap: {},\n};\n\n/**\n * Extracts values from an Arrow Vector properly.\n * Uses get(i) to handle complex types like Decimal128 correctly.\n * toArray() doesn't work properly for Decimal types - it returns raw bytes.\n *\n * @param col - The Arrow column/vector\n * @param divisor - Pre-computed divisor for DECIMAL types (10^scale)\n */\nfunction extractColumnValues(\n  col: { length: number; get: (i: number) => unknown } | null | undefined,\n  divisor?: number,\n): (string | number)[] {\n  if (!col) return [];\n\n  // Pre-allocate array for better performance with large datasets\n  const len = col.length;\n  const result: (string | number)[] = new Array(len);\n\n  for (let i = 0; i < len; i++) {\n    const val = col.get(i);\n    if (val === null || val === undefined) {\n      result[i] = 0;\n    } else if (typeof val === \"bigint\") {\n      // Apply decimal scaling if needed\n      const num = Number(val);\n      result[i] = divisor !== undefined ? num / divisor : num;\n    } else if (typeof val === \"number\") {\n      // Apply decimal scaling if needed\n      result[i] = divisor !== undefined ? val / divisor : val;\n    } else if (typeof val === \"string\") {\n      result[i] = val;\n    } else {\n      // For complex types (like Decimal), try to convert to number\n      const num = Number(val);\n      result[i] = divisor !== undefined ? num / divisor : num;\n    }\n  }\n  return result;\n}\n"],"mappings":"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"}

package/dist/react/charts/area/index.d.ts

@@ -1,28 +1,17 @@
 import { AreaChartProps } from "../types.js";
+import "react";
 import * as react_jsx_runtime275 from "react/jsx-runtime";
 
 //#region src/react/charts/area/index.d.ts
 
 /**
- * Area Chart component.
- * Supports both JSON and Arrow data formats with automatic format selection.
+ * Area Chart component for trend visualization with filled areas.
  *
- * @example Simple usage
- * ```tsx
- * <AreaChart
- *   queryKey="traffic_data"
- *   parameters={{ period: "weekly" }}
- * />
- * ```
+ * **Important:** This component uses Apache ECharts architecture. Configure it via props, not by passing child components.
  *
- * @example Stacked area chart
- * ```tsx
- * <AreaChart
- *   queryKey="revenue_breakdown"
- *   parameters={{ groupBy: "product" }}
- *   stacked={true}
- * />
- * ```
+ * **Best Practice:** Use the built-in data fetching by passing `queryKey` and `parameters` props instead of pre-fetching data with `useAnalyticsQuery`.
+ *
+ * Supports both query mode (queryKey + parameters) and data mode (static data).
  */
 declare const AreaChart: {
   (props: AreaChartProps): react_jsx_runtime275.JSX.Element;

package/dist/react/charts/area/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","names":[],"sources":["../../../../src/react/charts/area/index.tsx"],"sourcesContent":[],"mappings":";;;;;;;;AAwBA;;;;;;;;;;;;;;;;;;cAAa"}
+{"version":3,"file":"index.d.ts","names":[],"sources":["../../../../src/react/charts/area/index.tsx"],"sourcesContent":[],"mappings":";;;;;;;;;AAaA;;;;;;cAAa"}

package/dist/react/charts/area/index.js

@@ -2,25 +2,13 @@ import { createChart } from "../create-chart.js";
 
 //#region src/react/charts/area/index.tsx
 /**
-* Area Chart component.
-* Supports both JSON and Arrow data formats with automatic format selection.
+* Area Chart component for trend visualization with filled areas.
 *
-* @example Simple usage
-* ```tsx
-* <AreaChart
-*   queryKey="traffic_data"
-*   parameters={{ period: "weekly" }}
-* />
-* ```
+* **Important:** This component uses Apache ECharts architecture. Configure it via props, not by passing child components.
 *
-* @example Stacked area chart
-* ```tsx
-* <AreaChart
-*   queryKey="revenue_breakdown"
-*   parameters={{ groupBy: "product" }}
-*   stacked={true}
-* />
-* ```
+* **Best Practice:** Use the built-in data fetching by passing `queryKey` and `parameters` props instead of pre-fetching data with `useAnalyticsQuery`.
+*
+* Supports both query mode (queryKey + parameters) and data mode (static data).
 */
 const AreaChart = createChart("area", "AreaChart");
 

package/dist/react/charts/area/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../../../src/react/charts/area/index.tsx"],"sourcesContent":["import { createChart } from \"../create-chart\";\nimport type { AreaChartProps } from \"../types\";\n\n/**\n * Area Chart component.\n * Supports both JSON and Arrow data formats with automatic format selection.\n *\n * @example Simple usage\n * ```tsx\n * <AreaChart\n *   queryKey=\"traffic_data\"\n *   parameters={{ period: \"weekly\" }}\n * />\n * ```\n *\n * @example Stacked area chart\n * ```tsx\n * <AreaChart\n *   queryKey=\"revenue_breakdown\"\n *   parameters={{ groupBy: \"product\" }}\n *   stacked={true}\n * />\n * ```\n */\nexport const AreaChart = createChart<AreaChartProps>(\"area\", \"AreaChart\");\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AAwBA,MAAa,YAAY,YAA4B,QAAQ,YAAY"}
+{"version":3,"file":"index.js","names":[],"sources":["../../../../src/react/charts/area/index.tsx"],"sourcesContent":["import type { JSX } from \"react\";\nimport { createChart } from \"../create-chart\";\nimport type { AreaChartProps } from \"../types\";\n\n/**\n * Area Chart component for trend visualization with filled areas.\n *\n * **Important:** This component uses Apache ECharts architecture. Configure it via props, not by passing child components.\n *\n * **Best Practice:** Use the built-in data fetching by passing `queryKey` and `parameters` props instead of pre-fetching data with `useAnalyticsQuery`.\n *\n * Supports both query mode (queryKey + parameters) and data mode (static data).\n */\nexport const AreaChart = createChart<AreaChartProps>(\"area\", \"AreaChart\");\n\n// Type-only definition for documentation generation (not used at runtime)\n/**\n * Area Chart component for trend visualization with filled areas.\n *\n * **Important:** This component uses Apache ECharts architecture. Configure it via props, not by passing child components.\n *\n * **Best Practice:** Use the built-in data fetching by passing `queryKey` and `parameters` props instead of pre-fetching data with `useAnalyticsQuery`.\n *\n * Supports both query mode (queryKey + parameters) and data mode (static data).\n */\nexport function AreaChartDoc(props: AreaChartProps): JSX.Element {\n  return AreaChart(props);\n}\n"],"mappings":";;;;;;;;;;;;AAaA,MAAa,YAAY,YAA4B,QAAQ,YAAY"}

package/dist/react/charts/bar/index.d.ts

@@ -1,38 +1,17 @@
 import { BarChartProps } from "../types.js";
+import "react";
 import * as react_jsx_runtime276 from "react/jsx-runtime";
 
 //#region src/react/charts/bar/index.d.ts
 
 /**
- * Bar Chart component.
- * Supports both JSON and Arrow data formats with automatic format selection.
+ * Bar Chart component for categorical comparisons.
  *
- * @example Query mode with auto format selection
- * ```tsx
- * <BarChart
- *   queryKey="top_contributors"
- *   parameters={{ limit: 10 }}
- * />
- * ```
+ * **Important:** This component uses Apache ECharts architecture. Configure it via props, not by passing child components.
  *
- * @example Query mode with explicit Arrow format
- * ```tsx
- * <BarChart
- *   queryKey="spend_data"
- *   parameters={{ startDate, endDate }}
- *   format="arrow"
- * />
- * ```
+ * **Best Practice:** Use the built-in data fetching by passing `queryKey` and `parameters` props instead of pre-fetching data with `useAnalyticsQuery`.
  *
- * @example Data mode with JSON array
- * ```tsx
- * <BarChart
- *   data={[
- *     { category: "A", value: 100 },
- *     { category: "B", value: 200 },
- *   ]}
- * />
- * ```
+ * Supports both query mode (queryKey + parameters) and data mode (static data).
  */
 declare const BarChart: {
   (props: BarChartProps): react_jsx_runtime276.JSX.Element;

package/dist/react/charts/bar/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","names":[],"sources":["../../../../src/react/charts/bar/index.tsx"],"sourcesContent":[],"mappings":";;;;;;;;AAkCA;;;;;;;;;;;;;;;;;;;;;;;;;;;;cAAa"}
+{"version":3,"file":"index.d.ts","names":[],"sources":["../../../../src/react/charts/bar/index.tsx"],"sourcesContent":[],"mappings":";;;;;;;;;AAaA;;;;;;cAAa"}

package/dist/react/charts/bar/index.js

@@ -2,35 +2,13 @@ import { createChart } from "../create-chart.js";
 
 //#region src/react/charts/bar/index.tsx
 /**
-* Bar Chart component.
-* Supports both JSON and Arrow data formats with automatic format selection.
+* Bar Chart component for categorical comparisons.
 *
-* @example Query mode with auto format selection
-* ```tsx
-* <BarChart
-*   queryKey="top_contributors"
-*   parameters={{ limit: 10 }}
-* />
-* ```
+* **Important:** This component uses Apache ECharts architecture. Configure it via props, not by passing child components.
 *
-* @example Query mode with explicit Arrow format
-* ```tsx
-* <BarChart
-*   queryKey="spend_data"
-*   parameters={{ startDate, endDate }}
-*   format="arrow"
-* />
-* ```
+* **Best Practice:** Use the built-in data fetching by passing `queryKey` and `parameters` props instead of pre-fetching data with `useAnalyticsQuery`.
 *
-* @example Data mode with JSON array
-* ```tsx
-* <BarChart
-*   data={[
-*     { category: "A", value: 100 },
-*     { category: "B", value: 200 },
-*   ]}
-* />
-* ```
+* Supports both query mode (queryKey + parameters) and data mode (static data).
 */
 const BarChart = createChart("bar", "BarChart");
 

package/dist/react/charts/bar/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../../../src/react/charts/bar/index.tsx"],"sourcesContent":["import { createChart } from \"../create-chart\";\nimport type { BarChartProps } from \"../types\";\n\n/**\n * Bar Chart component.\n * Supports both JSON and Arrow data formats with automatic format selection.\n *\n * @example Query mode with auto format selection\n * ```tsx\n * <BarChart\n *   queryKey=\"top_contributors\"\n *   parameters={{ limit: 10 }}\n * />\n * ```\n *\n * @example Query mode with explicit Arrow format\n * ```tsx\n * <BarChart\n *   queryKey=\"spend_data\"\n *   parameters={{ startDate, endDate }}\n *   format=\"arrow\"\n * />\n * ```\n *\n * @example Data mode with JSON array\n * ```tsx\n * <BarChart\n *   data={[\n *     { category: \"A\", value: 100 },\n *     { category: \"B\", value: 200 },\n *   ]}\n * />\n * ```\n */\nexport const BarChart = createChart<BarChartProps>(\"bar\", \"BarChart\");\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAkCA,MAAa,WAAW,YAA2B,OAAO,WAAW"}
+{"version":3,"file":"index.js","names":[],"sources":["../../../../src/react/charts/bar/index.tsx"],"sourcesContent":["import type { JSX } from \"react\";\nimport { createChart } from \"../create-chart\";\nimport type { BarChartProps } from \"../types\";\n\n/**\n * Bar Chart component for categorical comparisons.\n *\n * **Important:** This component uses Apache ECharts architecture. Configure it via props, not by passing child components.\n *\n * **Best Practice:** Use the built-in data fetching by passing `queryKey` and `parameters` props instead of pre-fetching data with `useAnalyticsQuery`.\n *\n * Supports both query mode (queryKey + parameters) and data mode (static data).\n */\nexport const BarChart = createChart<BarChartProps>(\"bar\", \"BarChart\");\n\n// Type-only definition for documentation generation (not used at runtime)\n/**\n * Bar Chart component for categorical comparisons.\n *\n * **Important:** This component uses Apache ECharts architecture. Configure it via props, not by passing child components.\n *\n * **Best Practice:** Use the built-in data fetching by passing `queryKey` and `parameters` props instead of pre-fetching data with `useAnalyticsQuery`.\n *\n * Supports both query mode (queryKey + parameters) and data mode (static data).\n */\nexport function BarChartDoc(props: BarChartProps): JSX.Element {\n  return BarChart(props);\n}\n"],"mappings":";;;;;;;;;;;;AAaA,MAAa,WAAW,YAA2B,OAAO,WAAW"}

package/dist/react/charts/create-chart.js

@@ -19,7 +19,7 @@ import { jsx } from "react/jsx-runtime";
 */
 function createChart(chartType, displayName) {
 	const Component = (props) => {
-		const { queryKey, parameters, format, transformer, asUser, data, height = 300, className, ariaLabel, testId, ...chartProps } = props;
+		const { queryKey, parameters, format, transformer, data, height = 300, className, ariaLabel, testId, ...chartProps } = props;
 		return /* @__PURE__ */ jsx(ChartWrapper, {
 			...data !== void 0 ? {
 				data,
@@ -32,7 +32,6 @@ function createChart(chartType, displayName) {
 				parameters,
 				format,
 				transformer,
-				asUser,
 				height,
 				className,
 				ariaLabel,

package/dist/react/charts/create-chart.js.map

@@ -1 +1 @@
-{"version":3,"file":"create-chart.js","names":[],"sources":["../../../src/react/charts/create-chart.tsx"],"sourcesContent":["import { BaseChart } from \"./base\";\nimport type { ChartType, UnifiedChartProps } from \"./types\";\nimport { ChartWrapper } from \"./wrapper\";\n\n/**\n * Factory function to create chart components.\n * Eliminates boilerplate by generating components with the same pattern.\n *\n * @param chartType - The ECharts chart type\n * @param displayName - Component display name for React DevTools\n * @returns A typed chart component\n *\n * @example\n * ```tsx\n * export const BarChart = createChart<BarChartProps>(\"bar\", \"BarChart\");\n * export const LineChart = createChart<LineChartProps>(\"line\", \"LineChart\");\n * ```\n */\nexport function createChart<TProps extends UnifiedChartProps>(\n  chartType: ChartType,\n  displayName: string,\n) {\n  const Component = (props: TProps) => {\n    const {\n      // Query props\n      queryKey,\n      parameters,\n      format,\n      transformer,\n      asUser,\n      // Data props\n      data,\n      // Common props\n      height = 300,\n      className,\n      ariaLabel,\n      testId,\n      // All remaining props pass through to BaseChart\n      ...chartProps\n    } = props as TProps & {\n      queryKey?: string;\n      parameters?: Record<string, unknown>;\n      format?: string;\n      transformer?: unknown;\n      asUser?: boolean;\n      data?: unknown;\n      height?: number;\n      className?: string;\n      ariaLabel?: string;\n      testId?: string;\n    };\n\n    const wrapperProps =\n      data !== undefined\n        ? { data, height, className, ariaLabel, testId }\n        : {\n            queryKey: queryKey as string,\n            parameters,\n            format,\n            transformer,\n            asUser,\n            height,\n            className,\n            ariaLabel,\n            testId: testId ?? `${chartType}-chart-${queryKey}`,\n          };\n\n    return (\n      <ChartWrapper {...wrapperProps}>\n        {(chartData) => (\n          <BaseChart\n            data={chartData}\n            chartType={chartType}\n            height={height}\n            className={className}\n            {...chartProps}\n          />\n        )}\n      </ChartWrapper>\n    );\n  };\n\n  Component.displayName = displayName;\n  return Component;\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;AAkBA,SAAgB,YACd,WACA,aACA;CACA,MAAM,aAAa,UAAkB;EACnC,MAAM,EAEJ,UACA,YACA,QACA,aACA,QAEA,MAEA,SAAS,KACT,WACA,WACA,QAEA,GAAG,eACD;AA4BJ,SACE,oBAAC;GAAa,GAfd,SAAS,SACL;IAAE;IAAM;IAAQ;IAAW;IAAW;IAAQ,GAC9C;IACY;IACV;IACA;IACA;IACA;IACA;IACA;IACA;IACA,QAAQ,UAAU,GAAG,UAAU,SAAS;IACzC;cAID,cACA,oBAAC;IACC,MAAM;IACK;IACH;IACG;IACX,GAAI;KACJ;IAES;;AAInB,WAAU,cAAc;AACxB,QAAO"}
+{"version":3,"file":"create-chart.js","names":[],"sources":["../../../src/react/charts/create-chart.tsx"],"sourcesContent":["import { BaseChart } from \"./base\";\nimport type { ChartType, UnifiedChartProps } from \"./types\";\nimport { ChartWrapper } from \"./wrapper\";\n\n/**\n * Factory function to create chart components.\n * Eliminates boilerplate by generating components with the same pattern.\n *\n * @param chartType - The ECharts chart type\n * @param displayName - Component display name for React DevTools\n * @returns A typed chart component\n *\n * @example\n * ```tsx\n * export const BarChart = createChart<BarChartProps>(\"bar\", \"BarChart\");\n * export const LineChart = createChart<LineChartProps>(\"line\", \"LineChart\");\n * ```\n */\nexport function createChart<TProps extends UnifiedChartProps>(\n  chartType: ChartType,\n  displayName: string,\n) {\n  const Component = (props: TProps) => {\n    const {\n      // Query props\n      queryKey,\n      parameters,\n      format,\n      transformer,\n      // Data props\n      data,\n      // Common props\n      height = 300,\n      className,\n      ariaLabel,\n      testId,\n      // All remaining props pass through to BaseChart\n      ...chartProps\n    } = props as TProps & {\n      queryKey?: string;\n      parameters?: Record<string, unknown>;\n      format?: string;\n      transformer?: unknown;\n      data?: unknown;\n      height?: number;\n      className?: string;\n      ariaLabel?: string;\n      testId?: string;\n    };\n\n    const wrapperProps =\n      data !== undefined\n        ? { data, height, className, ariaLabel, testId }\n        : {\n            queryKey: queryKey as string,\n            parameters,\n            format,\n            transformer,\n            height,\n            className,\n            ariaLabel,\n            testId: testId ?? `${chartType}-chart-${queryKey}`,\n          };\n\n    return (\n      <ChartWrapper {...wrapperProps}>\n        {(chartData) => (\n          <BaseChart\n            data={chartData}\n            chartType={chartType}\n            height={height}\n            className={className}\n            {...chartProps}\n          />\n        )}\n      </ChartWrapper>\n    );\n  };\n\n  Component.displayName = displayName;\n  return Component;\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;AAkBA,SAAgB,YACd,WACA,aACA;CACA,MAAM,aAAa,UAAkB;EACnC,MAAM,EAEJ,UACA,YACA,QACA,aAEA,MAEA,SAAS,KACT,WACA,WACA,QAEA,GAAG,eACD;AA0BJ,SACE,oBAAC;GAAa,GAdd,SAAS,SACL;IAAE;IAAM;IAAQ;IAAW;IAAW;IAAQ,GAC9C;IACY;IACV;IACA;IACA;IACA;IACA;IACA;IACA,QAAQ,UAAU,GAAG,UAAU,SAAS;IACzC;cAID,cACA,oBAAC;IACC,MAAM;IACK;IACH;IACG;IACX,GAAI;KACJ;IAES;;AAInB,WAAU,cAAc;AACxB,QAAO"}

package/dist/react/charts/heatmap/index.d.ts

@@ -1,37 +1,22 @@
 import { HeatmapChartProps } from "../types.js";
+import "react";
 import * as react_jsx_runtime277 from "react/jsx-runtime";
 
 //#region src/react/charts/heatmap/index.d.ts
 
 /**
- * Heatmap Chart component.
- * Supports both JSON and Arrow data formats with automatic format selection.
+ * Heatmap Chart component for matrix-style data visualization.
+ *
+ * **Important:** This component uses Apache ECharts architecture. Configure it via props, not by passing child components.
+ *
+ * **Best Practice:** Use the built-in data fetching by passing `queryKey` and `parameters` props instead of pre-fetching data with `useAnalyticsQuery`.
  *
  * Data should be in "long format" with three fields:
  * - xKey: X-axis category (columns)
  * - yAxisKey: Y-axis category (rows)
  * - yKey: The numeric value for each cell
  *
- * @example Simple usage
- * ```tsx
- * <HeatmapChart
- *   queryKey="activity_matrix"
- *   xKey="day"
- *   yAxisKey="hour"
- *   yKey="count"
- * />
- * ```
- *
- * @example With custom color scale
- * ```tsx
- * <HeatmapChart
- *   queryKey="correlation_matrix"
- *   min={-1}
- *   max={1}
- *   showLabels={true}
- *   colorPalette="diverging"
- * />
- * ```
+ * Supports both query mode (queryKey + parameters) and data mode (static data).
  */
 declare const HeatmapChart: {
   (props: HeatmapChartProps): react_jsx_runtime277.JSX.Element;

package/dist/react/charts/heatmap/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","names":[],"sources":["../../../../src/react/charts/heatmap/index.tsx"],"sourcesContent":[],"mappings":";;;;;;;;AAiCA;;;;;;;;;;;;;;;;;;;;;;;;;;;cAAa"}
+{"version":3,"file":"index.d.ts","names":[],"sources":["../../../../src/react/charts/heatmap/index.tsx"],"sourcesContent":[],"mappings":";;;;;;;;;AAkBA;;;;;;;;;;;cAAa"}

package/dist/react/charts/heatmap/index.js

@@ -2,34 +2,18 @@ import { createChart } from "../create-chart.js";
 
 //#region src/react/charts/heatmap/index.tsx
 /**
-* Heatmap Chart component.
-* Supports both JSON and Arrow data formats with automatic format selection.
+* Heatmap Chart component for matrix-style data visualization.
+*
+* **Important:** This component uses Apache ECharts architecture. Configure it via props, not by passing child components.
+*
+* **Best Practice:** Use the built-in data fetching by passing `queryKey` and `parameters` props instead of pre-fetching data with `useAnalyticsQuery`.
 *
 * Data should be in "long format" with three fields:
 * - xKey: X-axis category (columns)
 * - yAxisKey: Y-axis category (rows)
 * - yKey: The numeric value for each cell
 *
-* @example Simple usage
-* ```tsx
-* <HeatmapChart
-*   queryKey="activity_matrix"
-*   xKey="day"
-*   yAxisKey="hour"
-*   yKey="count"
-* />
-* ```
-*
-* @example With custom color scale
-* ```tsx
-* <HeatmapChart
-*   queryKey="correlation_matrix"
-*   min={-1}
-*   max={1}
-*   showLabels={true}
-*   colorPalette="diverging"
-* />
-* ```
+* Supports both query mode (queryKey + parameters) and data mode (static data).
 */
 const HeatmapChart = createChart("heatmap", "HeatmapChart");
 

package/dist/react/charts/heatmap/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../../../src/react/charts/heatmap/index.tsx"],"sourcesContent":["import { createChart } from \"../create-chart\";\nimport type { HeatmapChartProps } from \"../types\";\n\n/**\n * Heatmap Chart component.\n * Supports both JSON and Arrow data formats with automatic format selection.\n *\n * Data should be in \"long format\" with three fields:\n * - xKey: X-axis category (columns)\n * - yAxisKey: Y-axis category (rows)\n * - yKey: The numeric value for each cell\n *\n * @example Simple usage\n * ```tsx\n * <HeatmapChart\n *   queryKey=\"activity_matrix\"\n *   xKey=\"day\"\n *   yAxisKey=\"hour\"\n *   yKey=\"count\"\n * />\n * ```\n *\n * @example With custom color scale\n * ```tsx\n * <HeatmapChart\n *   queryKey=\"correlation_matrix\"\n *   min={-1}\n *   max={1}\n *   showLabels={true}\n *   colorPalette=\"diverging\"\n * />\n * ```\n */\nexport const HeatmapChart = createChart<HeatmapChartProps>(\n  \"heatmap\",\n  \"HeatmapChart\",\n);\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAiCA,MAAa,eAAe,YAC1B,WACA,eACD"}
+{"version":3,"file":"index.js","names":[],"sources":["../../../../src/react/charts/heatmap/index.tsx"],"sourcesContent":["import type { JSX } from \"react\";\nimport { createChart } from \"../create-chart\";\nimport type { HeatmapChartProps } from \"../types\";\n\n/**\n * Heatmap Chart component for matrix-style data visualization.\n *\n * **Important:** This component uses Apache ECharts architecture. Configure it via props, not by passing child components.\n *\n * **Best Practice:** Use the built-in data fetching by passing `queryKey` and `parameters` props instead of pre-fetching data with `useAnalyticsQuery`.\n *\n * Data should be in \"long format\" with three fields:\n * - xKey: X-axis category (columns)\n * - yAxisKey: Y-axis category (rows)\n * - yKey: The numeric value for each cell\n *\n * Supports both query mode (queryKey + parameters) and data mode (static data).\n */\nexport const HeatmapChart = createChart<HeatmapChartProps>(\n  \"heatmap\",\n  \"HeatmapChart\",\n);\n\n// Type-only definition for documentation generation (not used at runtime)\n/**\n * Heatmap Chart component for matrix-style data visualization.\n *\n * **Important:** This component uses Apache ECharts architecture. Configure it via props, not by passing child components.\n *\n * **Best Practice:** Use the built-in data fetching by passing `queryKey` and `parameters` props instead of pre-fetching data with `useAnalyticsQuery`.\n *\n * Data should be in \"long format\" with three fields:\n * - xKey: X-axis category (columns)\n * - yAxisKey: Y-axis category (rows)\n * - yKey: The numeric value for each cell\n *\n * Supports both query mode (queryKey + parameters) and data mode (static data).\n */\nexport function HeatmapChartDoc(props: HeatmapChartProps): JSX.Element {\n  return HeatmapChart(props);\n}\n"],"mappings":";;;;;;;;;;;;;;;;;AAkBA,MAAa,eAAe,YAC1B,WACA,eACD"}

package/dist/react/charts/line/index.d.ts

@@ -1,29 +1,17 @@
 import { LineChartProps } from "../types.js";
+import "react";
 import * as react_jsx_runtime278 from "react/jsx-runtime";
 
 //#region src/react/charts/line/index.d.ts
 
 /**
- * Line Chart component.
- * Supports both JSON and Arrow data formats with automatic format selection.
+ * Line Chart component for time-series and trend visualization.
  *
- * @example Simple usage
- * ```tsx
- * <LineChart
- *   queryKey="revenue_over_time"
- *   parameters={{ period: "monthly" }}
- * />
- * ```
+ * **Important:** This component uses Apache ECharts architecture. Configure it via props, not by passing child components.
  *
- * @example With custom styling
- * ```tsx
- * <LineChart
- *   queryKey="trends"
- *   parameters={{ metric: "users" }}
- *   smooth={false}
- *   showSymbol={true}
- * />
- * ```
+ * **Best Practice:** Use the built-in data fetching by passing `queryKey` and `parameters` props instead of pre-fetching data with `useAnalyticsQuery`.
+ *
+ * Supports both query mode (queryKey + parameters) and data mode (static data).
  */
 declare const LineChart: {
   (props: LineChartProps): react_jsx_runtime278.JSX.Element;

package/dist/react/charts/line/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","names":[],"sources":["../../../../src/react/charts/line/index.tsx"],"sourcesContent":[],"mappings":";;;;;;;;AAyBA;;;;;;;;;;;;;;;;;;;cAAa"}
+{"version":3,"file":"index.d.ts","names":[],"sources":["../../../../src/react/charts/line/index.tsx"],"sourcesContent":[],"mappings":";;;;;;;;;AAaA;;;;;;cAAa"}

package/dist/react/charts/line/index.js

@@ -2,26 +2,13 @@ import { createChart } from "../create-chart.js";
 
 //#region src/react/charts/line/index.tsx
 /**
-* Line Chart component.
-* Supports both JSON and Arrow data formats with automatic format selection.
+* Line Chart component for time-series and trend visualization.
 *
-* @example Simple usage
-* ```tsx
-* <LineChart
-*   queryKey="revenue_over_time"
-*   parameters={{ period: "monthly" }}
-* />
-* ```
+* **Important:** This component uses Apache ECharts architecture. Configure it via props, not by passing child components.
 *
-* @example With custom styling
-* ```tsx
-* <LineChart
-*   queryKey="trends"
-*   parameters={{ metric: "users" }}
-*   smooth={false}
-*   showSymbol={true}
-* />
-* ```
+* **Best Practice:** Use the built-in data fetching by passing `queryKey` and `parameters` props instead of pre-fetching data with `useAnalyticsQuery`.
+*
+* Supports both query mode (queryKey + parameters) and data mode (static data).
 */
 const LineChart = createChart("line", "LineChart");
 

package/dist/react/charts/line/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../../../src/react/charts/line/index.tsx"],"sourcesContent":["import { createChart } from \"../create-chart\";\nimport type { LineChartProps } from \"../types\";\n\n/**\n * Line Chart component.\n * Supports both JSON and Arrow data formats with automatic format selection.\n *\n * @example Simple usage\n * ```tsx\n * <LineChart\n *   queryKey=\"revenue_over_time\"\n *   parameters={{ period: \"monthly\" }}\n * />\n * ```\n *\n * @example With custom styling\n * ```tsx\n * <LineChart\n *   queryKey=\"trends\"\n *   parameters={{ metric: \"users\" }}\n *   smooth={false}\n *   showSymbol={true}\n * />\n * ```\n */\nexport const LineChart = createChart<LineChartProps>(\"line\", \"LineChart\");\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAyBA,MAAa,YAAY,YAA4B,QAAQ,YAAY"}
+{"version":3,"file":"index.js","names":[],"sources":["../../../../src/react/charts/line/index.tsx"],"sourcesContent":["import type { JSX } from \"react\";\nimport { createChart } from \"../create-chart\";\nimport type { LineChartProps } from \"../types\";\n\n/**\n * Line Chart component for time-series and trend visualization.\n *\n * **Important:** This component uses Apache ECharts architecture. Configure it via props, not by passing child components.\n *\n * **Best Practice:** Use the built-in data fetching by passing `queryKey` and `parameters` props instead of pre-fetching data with `useAnalyticsQuery`.\n *\n * Supports both query mode (queryKey + parameters) and data mode (static data).\n */\nexport const LineChart = createChart<LineChartProps>(\"line\", \"LineChart\");\n\n// Type-only definition for documentation generation (not used at runtime)\n/**\n * Line Chart component for time-series and trend visualization.\n *\n * **Important:** This component uses Apache ECharts architecture. Configure it via props, not by passing child components.\n *\n * **Best Practice:** Use the built-in data fetching by passing `queryKey` and `parameters` props instead of pre-fetching data with `useAnalyticsQuery`.\n *\n * Supports both query mode (queryKey + parameters) and data mode (static data).\n */\nexport function LineChartDoc(props: LineChartProps): JSX.Element {\n  return LineChart(props);\n}\n"],"mappings":";;;;;;;;;;;;AAaA,MAAa,YAAY,YAA4B,QAAQ,YAAY"}

package/dist/react/charts/normalize.js

@@ -67,10 +67,10 @@ function detectFieldsFromJson(data, orientation) {
 		return isNumericValue(value) && !dateFields.includes(key);
 	});
 	if (orientation === "horizontal" || nameFields.length > 0 && dateFields.length === 0) {
-		const xField$1 = nameFields[0] || dateFields[0] || keys[0];
+		const xField = nameFields[0] || dateFields[0] || keys[0];
 		return {
-			xField: xField$1,
-			yFields: numericFields.length > 0 ? numericFields : keys.filter((k) => k !== xField$1),
+			xField,
+			yFields: numericFields.length > 0 ? numericFields : keys.filter((k) => k !== xField),
 			chartType: "categorical"
 		};
 	}
@@ -126,20 +126,20 @@ function extractFromJson(data, xField, yFields) {
 function normalizeChartData(data, xKey, yKey, orientation) {
 	if (isArrowTable(data)) {
 		const table = data;
-		const detected$1 = ArrowClient.detectFieldsFromArrow(table, orientation);
-		const resolvedXKey$1 = xKey ?? detected$1.xField;
-		const resolvedYKeys$1 = yKey ? Array.isArray(yKey) ? yKey : [yKey] : detected$1.yFields;
-		const { xData: rawXData$1, yDataMap: rawYDataMap$1 } = ArrowClient.extractChartData(table, resolvedXKey$1, resolvedYKeys$1);
-		let xData$1 = toChartArray(rawXData$1);
-		let yDataMap$1 = {};
-		for (const key of resolvedYKeys$1) yDataMap$1[key] = toChartArray(rawYDataMap$1[key] ?? []);
-		if (detected$1.chartType === "timeseries") ({xData: xData$1, yDataMap: yDataMap$1} = sortTimeSeriesAscending(xData$1, yDataMap$1, resolvedYKeys$1));
+		const detected = ArrowClient.detectFieldsFromArrow(table, orientation);
+		const resolvedXKey = xKey ?? detected.xField;
+		const resolvedYKeys = yKey ? Array.isArray(yKey) ? yKey : [yKey] : detected.yFields;
+		const { xData: rawXData, yDataMap: rawYDataMap } = ArrowClient.extractChartData(table, resolvedXKey, resolvedYKeys);
+		let xData = toChartArray(rawXData);
+		let yDataMap = {};
+		for (const key of resolvedYKeys) yDataMap[key] = toChartArray(rawYDataMap[key] ?? []);
+		if (detected.chartType === "timeseries") ({xData, yDataMap} = sortTimeSeriesAscending(xData, yDataMap, resolvedYKeys));
 		return {
-			xData: xData$1,
-			yDataMap: yDataMap$1,
-			xField: resolvedXKey$1,
-			yFields: resolvedYKeys$1,
-			chartType: detected$1.chartType
+			xData,
+			yDataMap,
+			xField: resolvedXKey,
+			yFields: resolvedYKeys,
+			chartType: detected.chartType
 		};
 	}
 	const jsonData = data;