@ixfx/components 0.1.5 → 0.2.0

package/bundle/index.d.ts

@@ -1,6 +1,7 @@
-import { Rect, RectPositioned } from "ixfx/geometry.js";
+import { RectPositioned } from "ixfx/geometry.js";
+import * as Numbers from "ixfx/numbers.js";
 import { Trees } from "ixfx/collections.js";
-import { CanvasHelper, Colour, DrawingHelper } from "ixfx/visual.js";
+import { CanvasHelper, DrawingHelper } from "ixfx/visual.js";
 
 //#region node_modules/@lit/reactive-element/development/css-tag.d.ts
 
@@ -1352,6 +1353,27 @@ declare global {
 //# sourceMappingURL=split-layout.d.ts.map
 //#endregion
 //#region src/charts/plot.d.ts
+type SeriesColourGenerator = (seriesName: string) => string;
+declare class PlotAxis {
+  #private;
+  name: string;
+  bounds: PlotAxisBounds;
+  constructor(name: string);
+  humanFormatValue(value: number[]): string;
+  getRange(series: Iterable<PlotSeries>): Numbers.NumericRange;
+  getCurrentRange(): Readonly<{
+    min: number;
+    max: number;
+  }> | undefined;
+  getValueScaler(series: Iterable<PlotSeries>): (value: number) => number;
+  computeActualRange(seriesOnAxis: Iterable<PlotSeries>, column?: number): {
+    min: number;
+    max: number;
+  };
+}
+type PlotSeriesDefault = {
+  limit: number;
+};
 /**
  * Attributes
  * * streaming: true/false (default: true)
@@ -1361,7 +1383,7 @@ declare global {
  *
  * * line-width: stroke width of drawing line (default:2)
  *
- * * render: 'dot' or 'line' (default: 'dot')
+ * * render: 'dot', 'line' or 'bar'(default: 'dot')
  * * hide-legend: If added, legend is not shown
  * * manual-draw: If added, automatic drawning is disabled
  *
@@ -1370,21 +1392,29 @@ declare global {
  */
 declare class PlotElement extends LitElement {
   #private;
-  streaming: boolean;
   hideLegend: boolean;
-  maxLength: number;
-  dataWidth: number;
-  fixedMax: number;
-  fixedMin: number;
-  lineWidth: number;
-  renderStyle: string;
-  manualDraw: boolean;
+  renderStyle: PlotElementRenderStyle;
   padding: number;
+  readonly primaryAxis: PlotAxis;
+  readonly secondaryAxis: PlotAxis;
   paused: boolean;
+  plotAreaFormat: PlotObjectFormatting;
+  /**
+   * Settings used for automatically generating series colour
+   */
+  automaticSeriesColour: {
+    saturation: number;
+    lightness: number;
+    alpha: number;
+  };
+  seriesDefault: Partial<PlotSeriesDefault>;
   canvasEl: Ref<HTMLCanvasElement>;
-  seriesRanges: Map<string, [min: number, max: number]>;
+  tooltipEl: Ref<HTMLDivElement>;
+  seriesColourGenerate: SeriesColourGenerator;
   get series(): PlotSeries[];
   get seriesCount(): number;
+  getSeriesFormatting(seriesName: string, createIfNeeded: boolean): SeriesFormatting | undefined;
+  setSeriesFormatting(seriesName: string, formatting: Partial<SeriesFormatting>): void;
   /**
    * Returns a `PlotElement` instance based on a query
    * ```js
@@ -1417,23 +1447,24 @@ declare class PlotElement extends LitElement {
    * Keeps all series, but deletes their data
    */
   clearData(): void;
-  render(): TemplateResult<1>;
   connectedCallback(): void;
   protected firstUpdated(_changedProperties: PropertyValues): void;
   updateColours(): void;
-  plot(value: number, seriesName?: string, skipDrawing?: boolean): PlotSeries;
-  plotSeries(values: number[], seriesName?: string, skipDrawing?: boolean): PlotSeries;
+  setRawValues(values: number[], seriesName: string, automaticallyDraw: boolean): PlotSeries;
+  /**
+   * Treats each property of an object as the series name
+   * @param value
+   * @param automaticallyDraw
+   */
+  appendObjectBySeries(value: object, automaticallyDraw: boolean): void;
+  appendRawValues(values: number[] | number, seriesName: string, automaticallyDraw: boolean): void;
   /**
    * Draw a set of key-value pairs as a batch.
    * @param value
    */
-  plotObject(value: object): void;
-  colourGenerator(_series: string): Colour.Colourish;
   draw(): void;
   drawLegend(cl: RectPositioned, d: DrawingHelper): void;
-  drawLineSeries(data: number[], cp: Rect, d: DrawingHelper, colour: string): void;
-  drawDotSeries(data: number[], cp: Rect, d: DrawingHelper, colour: string): void;
-  computePlot(c: CanvasHelper, plotHeight: number, axisYwidth: number, padding: number): {
+  calculatePlotDataArea(c: CanvasHelper, plotHeight: number, axisYwidth: number, padding: number): {
     x: number;
     y: number;
     width: number;
@@ -1452,29 +1483,66 @@ declare class PlotElement extends LitElement {
       y: number;
     }[];
   };
+  getOrCreateSeries(name: string): PlotSeries;
   getSeries(name: string): PlotSeries | undefined;
+  render(): TemplateResult<1>;
   static styles: CSSResult;
 }
+type SolidColourDrawStyle = Readonly<{
+  type: `solid`;
+  colour: string;
+}>;
+type NoneDrawStyle = Readonly<{
+  type: `none`;
+}>;
+type FillDrawStyle = SolidColourDrawStyle | NoneDrawStyle;
+type OutlineDrawStyle = SolidColourDrawStyle | NoneDrawStyle;
+type SeriesFormatting = PlotObjectFormatting & Readonly<{
+  axis: `primary` | `secondary`;
+  bar: BarSeriesFormatting;
+  dot: DotSeriesFormatting;
+  line: LineSeriesFormatting;
+}>;
+type PlotObjectFormatting = Readonly<{
+  fill: FillDrawStyle;
+  outline: OutlineDrawStyle;
+}>;
+type BarSeriesFormatting = {
+  gapWidth: number;
+};
+type DotSeriesFormatting = {
+  gapWidth: number;
+  radius: `automatic` | number;
+};
+type LineSeriesFormatting = {
+  width: number;
+  cap: `round` | `butt` | `square`;
+  join: `bevel` | `miter` | `round`;
+};
 declare class PlotSeries {
-  name: string;
-  colour: Colour.Colourish;
+  #private;
+  readonly name: string;
   private plot;
-  data: number[];
-  minSeen: number;
-  maxSeen: number;
-  constructor(name: string, colour: Colour.Colourish, plot: PlotElement);
+  constructor(name: string, plot: PlotElement);
+  get length(): number;
+  getValuesForColumn(column: number): Generator<[value: number, index: number]>;
+  getValue(index: number): number[] | undefined;
+  pushValue(value: number[] | number, automaticallyDraw: boolean): void;
+  setValues(values: number[][], automaticallyDraw: boolean): void;
+  humanFormatValue(value: number[]): string;
+  setRawValues(values: number[], automaticallyDraw: boolean): void;
+  setCapacityLimit(v: number): void;
+  unsetCapacityLimit(): void;
+  setFormatting(formatting: Partial<SeriesFormatting>): void;
+  getFormatting(): SeriesFormatting;
+  get isDirty(): boolean;
+  set isDirty(value: boolean);
+  get onPrimaryAxis(): boolean;
+  set onPrimaryAxis(value: boolean);
   clear(): void;
-  /**
-   * Returns a copy of the data scaled by the current
-   * range of the data
-   * @returns
-   */
-  getScaled(): number[];
-  getScaledBy(scaler: (v: number) => number): number[];
-  push(value: number): void;
-  setValues(values: number[]): void;
-  resetScale(): void;
 }
+type PlotAxisBounds = `automatic` | Numbers.NumericRange;
+type PlotElementRenderStyle = `dot` | `line` | `bar`;
 declare global {
   interface HTMLElementTagNameMap {
     "ixfx-plot-element": PlotElement;
@@ -1581,5 +1649,5 @@ declare const init: () => void;
 //# sourceMappingURL=index.d.ts.map
 
 //#endregion
-export { CrumbNavElement, CrumbNavigation2Part, CrumbNavigationElement, CrumbNavigationPart, DialElement, FrequencyHistogramPlot, HistogramVis, LabelPosition, NeedleStyle, PlotElement, PlotSeries, RequestPopup, SelectHorizontalElement, SplitLayoutElement, TabListElement, TabListItemElement, TabPanelElement, TabPanelsElement, ValueToLabelFormat, init };
+export { BarSeriesFormatting, CrumbNavElement, CrumbNavigation2Part, CrumbNavigationElement, CrumbNavigationPart, DialElement, DotSeriesFormatting, FillDrawStyle, FrequencyHistogramPlot, HistogramVis, LabelPosition, LineSeriesFormatting, NeedleStyle, NoneDrawStyle, OutlineDrawStyle, PlotAxis, PlotAxisBounds, PlotElement, PlotElementRenderStyle, PlotObjectFormatting, PlotSeries, PlotSeriesDefault, RequestPopup, SelectHorizontalElement, SeriesColourGenerator, SeriesFormatting, SolidColourDrawStyle, SplitLayoutElement, TabListElement, TabListItemElement, TabPanelElement, TabPanelsElement, ValueToLabelFormat, init };
 //# sourceMappingURL=index.d.ts.map