@emuanalytics/flow-rdf-ui 0.0.18-alpha.2 → 0.0.18-alpha.21

package/dist/flow-rdf-ui.d.ts

@@ -1,6 +1,13 @@
-import { Chart } from 'chart.js';
+import { BubbleDataPoint } from 'chart.js';
+import { ChartComponentLike } from 'chart.js';
+import { ChartData } from 'chart.js';
+import { Chart as ChartJs } from 'chart.js';
+import { ChartOptions } from 'chart.js';
+import { ChartTypeRegistry } from 'chart.js';
 import { CSSResultGroup } from 'lit';
 import { LitElement } from 'lit';
+import { Plugin as Plugin_2 } from 'chart.js';
+import { Point } from 'chart.js';
 import { PropertyValueMap } from 'lit';
 import type { ReactiveController } from 'lit';
 import type { ReactiveControllerHost } from 'lit';
@@ -16,6 +23,8 @@ export declare interface BaseColorStopOptions {
     label?: string;
 }
 
+export { ChartJs }
+
 export declare type ColorMapperField = StringColorMapperField | NumberColorMapperField | SelectColorMapperField;
 
 export declare interface ColorMapperOptions {
@@ -648,23 +657,51 @@ export declare class FlowCarouselItem extends FlowRdfElement {
 export declare type FlowChangeEvent = CustomEvent<Record<PropertyKey, never>>;
 
 /**
- * @summary Dividers are used to visually separate or group elements.
- * @documentation https://developer.emu-analytics.net/docs/flow-ui-rdf/components/divider
- * @status stable
- * @since 2.0
- *
- * @cssproperty --color - The color of the divider.
- * @cssproperty --width - The width of the divider.
- * @cssproperty --spacing - The spacing of the divider.
+ * The chart component is a container for [Chart.js](https://www.chartjs.org/) charts. The component
+ * supplies additional Flow RDF UI features including:
+ *
+ * - Consistent theming with other flow-rdf-ui components.
+ * - Additional plugins and charts types for commonly-used charts.
+ * - Convenience child components (`flow-ui-chart-data` and `flow-ui-chart-scale`) for defining chart data and scales.
+ *
+ * @tagname flow-ui-chart
+ * @summary The chart component displays Chart.js charts.
+ *
+ * @cssproperty --background-color - Chart background color (applied as the background color of the base container).
+ * @cssproperty --text-color - General text color (titles etc.)
+ * @cssproperty --axis-color - Color of the axis lines.
+ * @cssproperty --x-axis-color - Color of the x-axis lines. (defaults to `--axis-color`)
+ * @cssproperty --y-axis-color - Color of the y-axis lines. (defaults to `--axis-color`)
+ * @cssproperty --axis-grid-color - Color of the axis grid lines.
+ * @cssproperty --x-axis-grid-color - Color of the x-axis grid lines. (defaults to `--axis-grid-color`)
+ * @cssproperty --y-axis-grid-color - Color of the y-axis grid lines. (defaults to `--axis-grid-color`)
+ * @cssproperty --axis-label-color - Color of the axis labels.
+ * @cssproperty --x-axis-label-color - Color of the x-axis labels. (defaults to `--axis-label-color`)
+ * @cssproperty --y-axis-label-color - Color of the y-axis labels. (defaults to `--axis-label-color`)
+ * @cssproperty --tick-label-color - Color of the tick labels.
+ * @cssproperty --x-tick-label-color - Color of the x-axis tick labels. (defaults to `--tick-label-color`)
+ * @cssproperty --y-tick-label-color - Color of the y-axis tick labels. (defaults to `--tick-label-color`)
+ * @cssproperty --dataset-stroke-color-n - Color of the stroke for dataset n (where n = 0-9).
+ * @cssproperty --dataset-fill-color-n - Color of the fill for dataset n (where n = 0-9).
+ *
+ * @csspart base - The base container of the chart.
  */
 export declare class FlowChart extends FlowRdfElement {
     static styles: CSSResultGroup;
-    private chartRef;
-    chart: Chart;
+    private _chartRef;
+    private _chart;
+    /** The Chart.js chart instance. */
+    get chart(): ChartJs<keyof ChartTypeRegistry, (number | [number, number] | Point | BubbleDataPoint | null)[], unknown>;
+    /** The Chart.js chart type (e.g `line`, `bar` or a custom type). */
     type: string;
-    data: any;
-    options: any;
-    handleUpdate(): void;
+    /** The Chart.js `options` object. */
+    options: ChartOptions;
+    /** The Chart.js `data` object */
+    data: ChartData;
+    /** List of extra plugins to use for this chart. */
+    plugins: Plugin_2[];
+    /** Trigger a repaint of the chart. */
+    repaint(): void;
     firstUpdated(): void;
     connectedCallback(): void;
     disconnectedCallback(): void;
@@ -3848,6 +3885,8 @@ declare type IconLibraryMutator = (svg: SVGElement) => void;
 
 declare type IconLibraryResolver = (name: string) => string;
 
+export declare function initializeChartJs(): void;
+
 export declare interface NumberColorMapperField extends NumberColorStopOptions, BaseColorMapperField {
     type: 'number';
 }
@@ -3860,6 +3899,8 @@ export declare interface NumberColorStopOptions {
     units?: string;
 }
 
+export declare function registerChartComponent(...components: ChartComponentLike[]): void;
+
 /** Adds an icon library to the registry, or overrides an existing one. */
 export declare function registerIconLibrary(name: string, options: {
     resolver: IconLibraryResolver;