feat(axis): log scale improvements and options (opensearch-project#1014)

packages/osd-charts/api/charts.api.md

@@ -6,7 +6,7 @@
 
 import { $Values } from 'utility-types';
 import { ComponentType } from 'react';
-import React from 'react';
+import { default as React_2 } from 'react';
 import { ReactChild } from 'react';
 
 // @public
@@ -103,7 +103,7 @@ export interface ArcStyle {
 // Warning: (ae-missing-release-tag) "AreaSeries" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
 //
 // @public (undocumented)
-export const AreaSeries: React.FunctionComponent<SpecRequiredProps & SpecOptionalProps>;
+export const AreaSeries: React_2.FunctionComponent<SpecRequiredProps & SpecOptionalProps>;
 
 // @public
 export type AreaSeriesSpec = BasicSeriesSpec & HistogramConfig & Postfixes & {
@@ -160,7 +160,7 @@ export interface ArrayNode extends NodeDescriptor {
 // Warning: (ae-missing-release-tag) "Axis" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
 //
 // @public (undocumented)
-export const Axis: React.FunctionComponent<SpecRequired & SpecOptionals>;
+export const Axis: React_2.FunctionComponent<SpecRequired & SpecOptionals>;
 
 // @public (undocumented)
 export type AxisId = string;
@@ -262,7 +262,7 @@ export interface BandFillColorAccessorInput {
 // Warning: (ae-missing-release-tag) "BarSeries" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
 //
 // @public (undocumented)
-export const BarSeries: React.FunctionComponent<SpecRequiredProps_2 & SpecOptionalProps_2>;
+export const BarSeries: React_2.FunctionComponent<SpecRequiredProps_2 & SpecOptionalProps_2>;
 
 // @public
 export type BarSeriesSpec = BasicSeriesSpec & Postfixes & {
@@ -360,7 +360,7 @@ export type BrushEndListener = (brushArea: XYBrushArea) => void;
 // Warning: (ae-forgotten-export) The symbol "SpecOptionalProps" needs to be exported by the entry point index.d.ts
 //
 // @alpha
-export const BubbleSeries: React.FunctionComponent<SpecRequiredProps_3 & SpecOptionalProps_3>;
+export const BubbleSeries: React_2.FunctionComponent<SpecRequiredProps_3 & SpecOptionalProps_3>;
 
 // @alpha
 export type BubbleSeriesSpec = BasicSeriesSpec & {
@@ -419,7 +419,7 @@ export interface Cell {
 // Warning: (ae-missing-release-tag) "Chart" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
 //
 // @public (undocumented)
-export class Chart extends React.Component<ChartProps, ChartState> {
+export class Chart extends React_2.Component<ChartProps, ChartState> {
     constructor(props: ChartProps);
     // (undocumented)
     componentDidMount(): void;
@@ -428,9 +428,9 @@ export class Chart extends React.Component<ChartProps, ChartState> {
     // (undocumented)
     static defaultProps: ChartProps;
     // (undocumented)
-    dispatchExternalPointerEvent(event: PointerEvent): void;
+    dispatchExternalPointerEvent(event: PointerEvent_2): void;
     // (undocumented)
-    getChartContainerRef: () => React.RefObject<HTMLDivElement>;
+    getChartContainerRef: () => React_2.RefObject<HTMLDivElement>;
     // (undocumented)
     getPNGSnapshot(options?: {
         backgroundColor: string;
@@ -461,7 +461,7 @@ export interface ChartSizeObject {
 
 // Warning: (ae-missing-release-tag) "ChartTypes" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
 //
-// @public (undocumented)
+// @public
 export const ChartTypes: Readonly<{
     Global: "global";
     Goal: "goal";
@@ -517,6 +517,11 @@ export type ColorVariant = $Values<typeof ColorVariant>;
 // @public (undocumented)
 export type CompleteBoundedDomain = DomainBase & LowerBound & UpperBound;
 
+// Warning: (ae-missing-release-tag) "ContinuousDomain" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
+//
+// @public (undocumented)
+export type ContinuousDomain = [min: number, max: number];
+
 // Warning: (ae-missing-release-tag) "CrosshairStyle" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
 //
 // @public (undocumented)
@@ -858,7 +863,7 @@ export function getNodeName(node: ArrayNode): string;
 // Warning: (ae-forgotten-export) The symbol "SpecOptionalProps" needs to be exported by the entry point index.d.ts
 //
 // @alpha (undocumented)
-export const Goal: React.FunctionComponent<SpecRequiredProps_8 & SpecOptionalProps_8>;
+export const Goal: React_2.FunctionComponent<SpecRequiredProps_8 & SpecOptionalProps_8>;
 
 // @alpha (undocumented)
 export interface GoalSpec extends Spec {
@@ -923,7 +928,7 @@ export interface GroupBrushExtent {
 }
 
 // @alpha (undocumented)
-export const GroupBy: React.FunctionComponent<GroupByProps>;
+export const GroupBy: React_2.FunctionComponent<GroupByProps>;
 
 // @alpha (undocumented)
 export type GroupByAccessor = (spec: Spec, datum: any) => string | number;
@@ -952,7 +957,7 @@ export interface GroupBySpec extends Spec {
 export type GroupId = string;
 
 // @alpha (undocumented)
-export const Heatmap: React.FunctionComponent<Pick<HeatmapSpec, 'id' | 'data'> & Partial<Omit<HeatmapSpec, 'chartType' | 'specType' | 'id' | 'data'>>>;
+export const Heatmap: React_2.FunctionComponent<Pick<HeatmapSpec, 'id' | 'data'> & Partial<Omit<HeatmapSpec, 'chartType' | 'specType' | 'id' | 'data'>>>;
 
 // Warning: (ae-missing-release-tag) "HeatmapBrushEvent" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
 //
@@ -1131,7 +1136,7 @@ export type HierarchyOfArrays = Array<ArrayEntry>;
 // Warning: (ae-missing-release-tag) "HistogramBarSeries" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
 //
 // @public (undocumented)
-export const HistogramBarSeries: React.FunctionComponent<SpecRequiredProps_4 & SpecOptionalProps_4>;
+export const HistogramBarSeries: React_2.FunctionComponent<SpecRequiredProps_4 & SpecOptionalProps_4>;
 
 // @public
 export type HistogramBarSeriesSpec = Omit<BarSeriesSpec, 'stackAccessors'> & {
@@ -1273,7 +1278,7 @@ export const LIGHT_THEME: Theme;
 // Warning: (ae-missing-release-tag) "LineAnnotation" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
 //
 // @public (undocumented)
-export const LineAnnotation: React.FunctionComponent<SpecRequiredProps_5 & SpecOptionalProps_5>;
+export const LineAnnotation: React_2.FunctionComponent<SpecRequiredProps_5 & SpecOptionalProps_5>;
 
 // @public
 export interface LineAnnotationDatum {
@@ -1308,7 +1313,7 @@ export interface LineAnnotationStyle {
 // Warning: (ae-missing-release-tag) "LineSeries" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
 //
 // @public (undocumented)
-export const LineSeries: React.FunctionComponent<SpecRequiredProps_6 & SpecOptionalProps_6>;
+export const LineSeries: React_2.FunctionComponent<SpecRequiredProps_6 & SpecOptionalProps_6>;
 
 // @public
 export type LineSeriesSpec = BasicSeriesSpec & HistogramConfig & {
@@ -1340,6 +1345,19 @@ export interface LineStyle {
     visible: boolean;
 }
 
+// Warning: (ae-missing-release-tag) "LogBase" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
+// Warning: (ae-missing-release-tag) "LogBase" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
+//
+// @public (undocumented)
+export const LogBase: Readonly<{
+    Common: "common";
+    Binary: "binary";
+    Natural: "natural";
+}>;
+
+// @public
+export type LogBase = $Values<typeof LogBase>;
+
 // @public (undocumented)
 export type LowerBoundedDomain = DomainBase & LowerBound;
 
@@ -1410,6 +1428,11 @@ export interface OrderBy {
     direction?: Direction;
 }
 
+// Warning: (ae-missing-release-tag) "OrdinalDomain" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
+//
+// @public (undocumented)
+export type OrdinalDomain = (number | string)[];
+
 // Warning: (ae-missing-release-tag) "PARENT_KEY" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
 //
 // @public (undocumented)
@@ -1428,7 +1451,7 @@ export type PartialTheme = RecursivePartial<Theme>;
 // Warning: (ae-missing-release-tag) "Partition" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
 //
 // @public (undocumented)
-export const Partition: React.FunctionComponent<SpecRequiredProps_7 & SpecOptionalProps_7>;
+export const Partition: React_2.FunctionComponent<SpecRequiredProps_7 & SpecOptionalProps_7>;
 
 // Warning: (ae-forgotten-export) The symbol "StaticConfig" needs to be exported by the entry point index.d.ts
 // Warning: (ae-missing-release-tag) "Config" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
@@ -1520,7 +1543,9 @@ export type Placement = $Values<typeof Placement>;
 // Warning: (ae-missing-release-tag) "PointerEvent" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
 //
 // @public (undocumented)
-export type PointerEvent = PointerOverEvent | PointerOutEvent;
+type PointerEvent_2 = PointerOverEvent | PointerOutEvent;
+
+export { PointerEvent_2 as PointerEvent }
 
 // Warning: (ae-missing-release-tag) "PointerEventType" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
 //
@@ -1558,7 +1583,7 @@ export interface PointerOverEvent extends BasePointerEvent {
 // Warning: (ae-missing-release-tag) "PointerUpdateListener" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
 //
 // @public (undocumented)
-export type PointerUpdateListener = (event: PointerEvent) => void;
+export type PointerUpdateListener = (event: PointerEvent_2) => void;
 
 // Warning: (ae-missing-release-tag) "PointShape" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
 //
@@ -1640,7 +1665,7 @@ export type RawTextGetter = (node: ShapeTreeNode) => string;
 // Warning: (ae-missing-release-tag) "RectAnnotation" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
 //
 // @public (undocumented)
-export const RectAnnotation: React.FunctionComponent<Pick<RectAnnotationSpec, 'id' | 'dataValues'> & Partial<Omit<RectAnnotationSpec, 'chartType' | 'specType' | 'seriesType' | 'id' | 'dataValues' | 'domainType' | 'annotationType'>>>;
+export const RectAnnotation: React_2.FunctionComponent<Pick<RectAnnotationSpec, 'id' | 'dataValues'> & Partial<Omit<RectAnnotationSpec, 'chartType' | 'specType' | 'seriesType' | 'id' | 'dataValues' | 'domainType' | 'annotationType'>>>;
 
 // Warning: (ae-missing-release-tag) "RectAnnotationDatum" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
 //
@@ -1711,6 +1736,16 @@ export type ScaleBandType = ScaleOrdinalType;
 // @public (undocumented)
 export type ScaleContinuousType = typeof ScaleType.Linear | typeof ScaleType.Time | typeof ScaleType.Log | typeof ScaleType.Sqrt;
 
+// Warning: (ae-missing-release-tag) "ScaleLogOptions" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
+//
+// @public (undocumented)
+export interface ScaleLogOptions {
+    xLogBase?: LogBase;
+    xLogMinLimit?: number;
+    yLogBase?: LogBase;
+    yLogMinLimit?: number;
+}
+
 // Warning: (ae-missing-release-tag) "ScaleOrdinalType" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
 //
 // @public (undocumented)
@@ -1724,7 +1759,9 @@ export interface ScalesConfig {
     histogramPadding: number;
 }
 
-// @public
+// Warning: (ae-missing-release-tag) "ScaleType" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
+//
+// @public (undocumented)
 export const ScaleType: Readonly<{
     Linear: "linear";
     Ordinal: "ordinal";
@@ -1736,7 +1773,7 @@ export const ScaleType: Readonly<{
     Threshold: "threshold";
 }>;
 
-// @public (undocumented)
+// @public
 export type ScaleType = $Values<typeof ScaleType>;
 
 // Warning: (ae-missing-release-tag) "SectorGeomSpecY" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
@@ -1852,6 +1889,8 @@ export interface SeriesSpec extends Spec {
 // @public (undocumented)
 export type SeriesSpecs<S extends BasicSeriesSpec = BasicSeriesSpec> = Array<S>;
 
+// Warning: (ae-missing-release-tag) "SeriesTypes" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
+//
 // @public (undocumented)
 export const SeriesTypes: Readonly<{
     Area: "area";
@@ -1860,13 +1899,13 @@ export const SeriesTypes: Readonly<{
     Bubble: "bubble";
 }>;
 
-// @public (undocumented)
+// @public
 export type SeriesTypes = $Values<typeof SeriesTypes>;
 
 // Warning: (ae-missing-release-tag) "Settings" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
 //
 // @public (undocumented)
-export const Settings: React.FunctionComponent<SettingsSpecProps>;
+export const Settings: React_2.FunctionComponent<SettingsSpecProps>;
 
 // @public
 export interface SettingsSpec extends Spec {
@@ -1923,15 +1962,14 @@ export interface SettingsSpec extends Spec {
     // (undocumented)
     rotation: Rotation;
     roundHistogramBrushValues?: boolean;
+    scaleLogOptions?: ScaleLogOptions;
     // (undocumented)
     showLegend: boolean;
     showLegendExtra: boolean;
     theme?: PartialTheme | PartialTheme[];
     tooltip: TooltipSettings;
-    // Warning: (ae-forgotten-export) The symbol "Domain" needs to be exported by the entry point index.d.ts
-    //
     // (undocumented)
-    xDomain?: Domain | DomainRange;
+    xDomain?: ContinuousDomain | OrdinalDomain | DomainRange;
 }
 
 // Warning: (ae-missing-release-tag) "SettingsSpecProps" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
@@ -1985,7 +2023,7 @@ export interface SimplePadding {
 }
 
 // @alpha (undocumented)
-export const SmallMultiples: React.FunctionComponent<SmallMultiplesProps>;
+export const SmallMultiples: React_2.FunctionComponent<SmallMultiplesProps>;
 
 // @alpha (undocumented)
 export type SmallMultiplesProps = Partial<Omit<SmallMultiplesSpec, 'id' | 'chatType' | 'specType'>>;

packages/osd-charts/docs/charts.tsx

@@ -100,7 +100,7 @@ function generateAnnotationData(values: any[]): LineAnnotationDatum[] {
   return values.map((value, index) => ({ dataValue: value, details: `detail-${index}` }));
 }
 
-export const lineBasicXDomainContinous = () => {
+export const lineBasicXDomainContinuous = () => {
   const data = arrayKnobs('data values', [2.5, 7.2]);
   const dataValues = generateAnnotationData(data);
 
@@ -149,7 +149,7 @@ export const lineBasicXDomainContinous = () => {
     </Chart>
   );
 };
-lineBasicXDomainContinous.story = {
+lineBasicXDomainContinuous.story = {
   name: '[line] basic xDomain continuous',
 };
 

packages/osd-charts/integration/tests/area_stories.test.ts

@@ -75,6 +75,18 @@ describe('Area series stories', () => {
       );
     });
 
+    it('shows only positive domain mixed polarity domain with limit', async () => {
+      await common.expectChartAtUrlToMatchScreenshot(
+        'http://localhost:9001/?path=/story/area-chart--with-negative-and-positive&knob-Y scale=log&knob-Y log limit=0.01',
+      );
+    });
+
+    it('shows only positive domain mixed polarity domain with limit of 0', async () => {
+      await common.expectChartAtUrlToMatchScreenshot(
+        'http://localhost:9001/?path=/story/area-chart--with-negative-and-positive&knob-Y scale=log&knob-Y log limit=0',
+      );
+    });
+
     it('shows only positive values when hiding negative one', async () => {
       const action = async () => {
         await common.disableAnimations();

packages/osd-charts/integration/tests/scales_stories.test.ts

@@ -0,0 +1,29 @@
+/*
+ * Licensed to Elasticsearch B.V. under one or more contributor
+ * license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright
+ * ownership. Elasticsearch B.V. licenses this file to you under
+ * the Apache License, Version 2.0 (the "License"); you may
+ * not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import { LogBase } from '../../src/scales/scale_continuous';
+import { common } from '../page_objects';
+
+describe('Scales stories', () => {
+  it.each(Object.values(LogBase))('should render proper tick count', async (base) => {
+    await common.expectChartAtUrlToMatchScreenshot(
+      `http://localhost:9001/?path=/story/scales--log-scale-options&knob-Log base_Y - Axis=${base}`,
+    );
+  });
+});

packages/osd-charts/package.json

@@ -87,8 +87,8 @@
     "@elastic/eui": "^27.0.0",
     "@elastic/github-checks-reporter": "^0.0.20-b3",
     "@mdx-js/loader": "^1.6.6",
-    "@microsoft/api-documenter": "^7.7.20",
-    "@microsoft/api-extractor": "^7.7.9",
+    "@microsoft/api-documenter": "^7.12.7",
+    "@microsoft/api-extractor": "^7.13.1",
     "@semantic-release/changelog": "^5.0.1",
     "@semantic-release/commit-analyzer": "^8.0.1",
     "@semantic-release/git": "^9.0.0",

packages/osd-charts/src/chart_types/heatmap/layout/viewmodel/viewmodel.ts

@@ -104,7 +104,8 @@ export function shapeViewModel(
 
   const yInvertedScale = scaleQuantize<string | number>().domain([0, height]).range(yValues);
 
-  let xValues = xDomain.domain;
+  // TODO: Fix domain type to be `Array<number | string>`
+  let xValues = xDomain.domain as any[];
 
   const timeScale =
     xDomain.scaleType === ScaleType.Time
@@ -123,8 +124,8 @@ export function shapeViewModel(
 
   if (timeScale) {
     const result = [];
-    let [timePoint] = xDomain.domain;
-    while (timePoint < xDomain.domain[1]) {
+    let [timePoint] = xValues;
+    while (timePoint < xValues[1]) {
       result.push(timePoint);
       timePoint += xDomain.minInterval;
     }