@hpcc-js/chart 3.5.3 → 3.6.0

package/src/Pie.ts

@@ -1,5 +1,5 @@
 import { I2DChart, ITooltip } from "@hpcc-js/api";
-import { InputField, SVGWidget, Utility } from "@hpcc-js/common";
+import { d3Event, InputField, SVGWidget, Utility } from "@hpcc-js/common";
 import { degreesToRadians, normalizeRadians } from "@hpcc-js/util";
 import { format as d3Format } from "d3-format";
 import { interpolate as d3Interpolate } from "d3-interpolate";
@@ -33,6 +33,7 @@ export class Pie extends SVGWidget {
     private _maxLabelBottom = 0;
     private _seriesValueFormatter;
     private _seriesPercentageFormatter;
+
     constructor() {
         super();
         I2DChart.call(this);
@@ -91,6 +92,11 @@ export class Pie extends SVGWidget {
         }, 0);
     }
 
+    calcPadAngleRadians(): number {
+        const paddingValue = this.slicePadding();
+        return paddingValue > 0 ? Math.min(paddingValue, 0.05) : 0;
+    }
+
     getLabelText(d, truncate?) {
         let len;
         let label = d.data[0];
@@ -140,12 +146,19 @@ export class Pie extends SVGWidget {
 
     _slices;
     _labels;
-    enter(_domNode, element) {
-        super.enter(_domNode, element);
-        this._selection.widgetElement(element);
+
+    enter(domNode, element) {
+        super.enter(domNode, element);
+        this._selection
+            .widgetElement(element)
+            .skipBringToTop(true)
+            ;
+
         this._slices = element.append("g");
         this._labels = element.append("g");
+
         const context = this;
+
         this
             .tooltipHTML(function (d) {
                 switch (context.tooltipStyle()) {
@@ -168,8 +181,10 @@ export class Pie extends SVGWidget {
     }
 
     update(_domNode, element) {
+        this.selectionGlow(!this.tabNavigation());
         super.update(_domNode, element);
         const context = this;
+
         this.updateD3Pie();
         this._palette = this._palette.switch(this.paletteID());
         this._seriesValueFormatter = d3Format(this.seriesValueFormat() as string);
@@ -179,13 +194,15 @@ export class Pie extends SVGWidget {
         }
         this._smallValueLabelHeight = this.calcSmallValueLabelHeight();
         this._totalValue = this.calcTotalValue();
-        const innerRadius = this.calcInnerRadius();
         const outerRadius = this.calcOuterRadius();
+        const innerRadius = Math.max(this.calcInnerRadius(), Math.min(outerRadius / 30, 6));
         const labelRadius = outerRadius + 12;
+
         this.d3Arc
             .innerRadius(innerRadius)
             .padRadius(outerRadius)
             .outerRadius(outerRadius)
+            .padAngle(this.calcPadAngleRadians())
             ;
 
         this._quadIdxArr = [[], [], [], []];
@@ -213,6 +230,13 @@ export class Pie extends SVGWidget {
             .on("dblclick", function (d) {
                 context.dblclick(context.rowToObj(d.data), context.columns()[1], context._selection.selected(this));
             })
+            .on("keydown", function (evt, d) {
+                const event = d3Event();
+                if (context.tabNavigation() && (event.code === "Space" || event.key === "Enter")) {
+                    event.preventDefault();
+                    context._selection.click(this);
+                }
+            })
             .each(function (d, i) {
                 d3Select(this).append("path")
                     .on("mouseout.tooltip", context.tooltip.hide)
@@ -223,6 +247,9 @@ export class Pie extends SVGWidget {
             })
             .merge(arc).transition()
             .attr("opacity", 1)
+            .attr("tabindex", context.tabNavigation() ? "0" : null)
+            .attr("role", context.tabNavigation() ? "button" : null)
+            .attr("aria-label", context.tabNavigation() ? (d: any) => `${d.data[0]}: ${d.data[1]}` : null)
             .each(function (d, i) {
                 const quad = context.getQuadrant(midAngle(d));
                 context._quadIdxArr[quad].push(i);
@@ -429,7 +456,7 @@ export class Pie extends SVGWidget {
         }
 
         this.d3Pie
-            .padAngle(0.0025)
+            .padAngle(this.calcPadAngleRadians())
             .startAngle(startAngle)
             .endAngle(2 * Math.PI + startAngle)
             .value(function (d) {
@@ -456,6 +483,8 @@ export interface Pie {
     startAngle(_: number): this;
     labelHeight(): number;
     labelHeight(_: number): this;
+    slicePadding(): number;
+    slicePadding(_: number): this;
     seriesPercentageFormat(): string;
     seriesPercentageFormat(_: string): this;
     showLabels(): boolean;
@@ -463,10 +492,14 @@ export interface Pie {
     sortDataByValue(): "none" | "ascending" | "descending";
     sortDataByValue(_: "none" | "ascending" | "descending"): this;
 
-    paletteID(_?: string): string | Pie;
-    useClonedPalette(_?: boolean): boolean | Pie;
-    outerText(_?: boolean): boolean | Pie;
+    paletteID(): string;
+    paletteID(_: string): this;
+    useClonedPalette(): boolean;
+    useClonedPalette(_: boolean): this;
+    outerText(): boolean;
+    outerText(_: boolean): this;
     innerRadius(): number;
+    innerRadius(_: number): this;
     innerRadius_exists(): boolean;
 
     //  I2DChart
@@ -492,6 +525,10 @@ export interface Pie {
 
     //  SimpleSelectionMixin
     _selection: Utility.SimpleSelection;
+
+    // Tab Navigation
+    tabNavigation(): boolean;
+    tabNavigation(_: boolean): this;
 }
 Pie.prototype.publish("showLabels", true, "boolean", "If true, wedge labels will display");
 Pie.prototype.publish("showSeriesValue", false, "boolean", "Append data series value next to label", null, { disable: w => !w.showLabels() });
@@ -504,4 +541,6 @@ Pie.prototype.publish("innerRadius", 0, "number", "Sets inner pie hole radius as
 Pie.prototype.publish("minOuterRadius", 20, "number", "Minimum outer radius (pixels)");
 Pie.prototype.publish("startAngle", 0, "number", "Starting angle of the first (and largest) wedge (degrees)");
 Pie.prototype.publish("labelHeight", 12, "number", "Font size of labels (pixels)", null, { disable: w => !w.showLabels() });
+Pie.prototype.publish("slicePadding", 0.01, "number", "Padding between pie slices (converted to pixels)", null, { tags: ["Basic"], range: { min: 0, step: 0.01, max: 0.2 } });
 Pie.prototype.publish("sortDataByValue", "descending", "set", "Sort data by value", ["none", "ascending", "descending"]);
+Pie.prototype.publish("tabNavigation", false, "boolean", "Enable or disable tab navigation");

package/src/Scatter.css

@@ -6,11 +6,38 @@
 
 .chart_Scatter .point .pointSelection {
     fill: none;
-    stroke: none;
+    stroke: transparent;
+    stroke-width: 2px;
     pointer-events: all;
+    transition: all 0.2s ease;
 }
 
 .chart_Scatter .point .pointSelection.selected {
-    fill: none;
-    stroke: red;
+    stroke: #dc3545 !important;
+    stroke-width: 3px !important;
+    paint-order: fill stroke !important;
+}
+
+.chart_Scatter .point .pointSelection:hover {
+    stroke: rgba(108, 117, 125, 0.6);
+    stroke-width: 2px;
+    filter: brightness(1.05);
+}
+
+.chart_Scatter .point .pointSelection:focus {
+    stroke: #007bff !important;
+    stroke-width: 3px !important;
+    paint-order: fill stroke !important;
 }
+
+.chart_Scatter .point .pointSelection.selected:focus {
+    stroke: #6f42c1 !important;
+}
+
+.chart_Scatter .point .pointSelection:focus-visible {
+    outline: none;
+}
+
+.chart_Scatter .point .pointSelection:active {
+    outline: none !important;
+}

package/src/Scatter.ts

@@ -1,5 +1,5 @@
 import { INDChart, ITooltip } from "@hpcc-js/api";
-import { InputField } from "@hpcc-js/common";
+import { d3Event, InputField } from "@hpcc-js/common";
 import { extent as d3Extent } from "d3-array";
 import { scaleLinear as d3ScaleLinear, scaleLog as d3ScaleLog, scalePow as d3ScalePow, scaleSqrt as d3ScaleSqrt } from "d3-scale";
 import { select as d3Select } from "d3-selection";
@@ -129,6 +129,18 @@ export class Scatter extends XYAxis {
         const height = isHorizontal ? this.height() : this.width();
         const context = this;
 
+        if (this.tabNavigation() && host.parentRelativeDiv) {
+            host.parentRelativeDiv
+                .attr("tabindex", "0")
+                .attr("role", "group")
+                .attr("aria-label", `${this.columns()[0] || "Chart"} data`);
+        } else if (host.parentRelativeDiv) {
+            host.parentRelativeDiv
+                .attr("tabindex", null)
+                .attr("role", null)
+                .attr("aria-label", null);
+        }
+
         this._palette = this._palette.switch(this.paletteID());
         if (this.useClonedPalette()) {
             this._palette = this._palette.cloneNotExists(this.paletteID() + "_" + this.id());
@@ -258,6 +270,15 @@ export class Scatter extends XYAxis {
                     .on("dblclick", function (d: any, _idx) {
                         context.dblclick(host.rowToObj(host.data()[d.rowIdx]), d.column, host._selection.selected(this));
                     })
+                    .on("keydown", function (evt, d: any) {
+                        if (context.tabNavigation()) {
+                            const event = d3Event();
+                            if (event.code === "Space" || event.key === "Enter") {
+                                event.preventDefault();
+                                host._selection.click(this);
+                            }
+                        }
+                    })
                     ;
             })
             .merge(points)
@@ -279,6 +300,9 @@ export class Scatter extends XYAxis {
                     .attr("cx", function (d) { return context.xPos(host, d); })
                     .attr("cy", function (d) { return context.yPos(host, d); })
                     .attr("r", d2.size)
+                    .attr("tabindex", context.tabNavigation() ? 0 : null)
+                    .attr("role", context.tabNavigation() ? "button" : null)
+                    .attr("aria-label", context.tabNavigation() ? (d: any) => `${d.column || "Value"}: ${d.value} @ ${d.label}` : null)
                     ;
 
                 const element = d3Select(this).select(".pointShape");
@@ -371,6 +395,7 @@ export interface Scatter {
     tooltipHTML(_): string;
     tooltipFormat(_): string;
     tooltipStyle(): "default" | "none" | "series-table";
+    tooltipStyle(_: "default" | "none" | "series-table"): this;
 }
 Scatter.prototype.publish("paletteID", "default", "set", "Color palette for this widget", Scatter.prototype._palette.switch(), { tags: ["Basic", "Shared"] });
 Scatter.prototype.publish("pointSizeScale", "linear", "set", "pointSizeScale", ["linear", "pow", "log", "sqrt"]);

package/src/XYAxis.ts

@@ -323,6 +323,7 @@ export class XYAxis extends SVGWidget {
 
     protected _prevXAxisType;
     update(domNode, element) {
+        this.selectionGlow(!this.tabNavigation());
         super.update(domNode, element);
         const context = this;
 
@@ -754,6 +755,10 @@ export interface XYAxis {
     xAxisPadding(_: number): this;
     yAxisPadding(): number;
     yAxisPadding(_: number): this;
+
+    //  Tab Navigation
+    tabNavigation(): boolean;
+    tabNavigation(_: boolean): this;
 }
 
 XYAxis.prototype.publish("orientation", "horizontal", "set", "Selects orientation for the axis", ["horizontal", "vertical"]);
@@ -801,3 +806,4 @@ XYAxis.prototype.publish("regions", [], "array", "Regions");
 XYAxis.prototype.publish("layers", [], "widgetArray", "Layers", null, { render: false });
 XYAxis.prototype.publishProxy("xAxisPadding", "domainAxis", "padding");
 XYAxis.prototype.publishProxy("yAxisPadding", "valueAxis", "padding");
+XYAxis.prototype.publish("tabNavigation", false, "boolean", "Enable or disable tab navigation");

package/types/Pie.d.ts

@@ -23,13 +23,14 @@ export declare class Pie extends SVGWidget {
     calcOuterRadius(): number;
     calcSmallValueLabelHeight(): number;
     calcTotalValue(): number;
+    calcPadAngleRadians(): number;
     getLabelText(d: any, truncate?: any): any;
     selection(): any[];
     selection(_: any[]): this;
     selectByLabel(_: string): void;
     _slices: any;
     _labels: any;
-    enter(_domNode: any, element: any): void;
+    enter(domNode: any, element: any): void;
     update(_domNode: any, element: any): void;
     isLeftSide(midAngle: any): any;
     getQuadrant(radians: any): number;
@@ -51,16 +52,22 @@ export interface Pie {
     startAngle(_: number): this;
     labelHeight(): number;
     labelHeight(_: number): this;
+    slicePadding(): number;
+    slicePadding(_: number): this;
     seriesPercentageFormat(): string;
     seriesPercentageFormat(_: string): this;
     showLabels(): boolean;
     showLabels(_: boolean): this;
     sortDataByValue(): "none" | "ascending" | "descending";
     sortDataByValue(_: "none" | "ascending" | "descending"): this;
-    paletteID(_?: string): string | Pie;
-    useClonedPalette(_?: boolean): boolean | Pie;
-    outerText(_?: boolean): boolean | Pie;
+    paletteID(): string;
+    paletteID(_: string): this;
+    useClonedPalette(): boolean;
+    useClonedPalette(_: boolean): this;
+    outerText(): boolean;
+    outerText(_: boolean): this;
     innerRadius(): number;
+    innerRadius(_: number): this;
     innerRadius_exists(): boolean;
     _palette: any;
     fillColor(row: any[], column: string, value: number): string;
@@ -80,4 +87,6 @@ export interface Pie {
     tooltipOffset_default(): number;
     tooltipOffset_default(_: number): Pie;
     _selection: Utility.SimpleSelection;
+    tabNavigation(): boolean;
+    tabNavigation(_: boolean): this;
 }

package/types/Scatter.d.ts

@@ -55,4 +55,5 @@ export interface Scatter {
     tooltipHTML(_: any): string;
     tooltipFormat(_: any): string;
     tooltipStyle(): "default" | "none" | "series-table";
+    tooltipStyle(_: "default" | "none" | "series-table"): this;
 }

package/types/XYAxis.d.ts

@@ -177,4 +177,6 @@ export interface XYAxis {
     xAxisPadding(_: number): this;
     yAxisPadding(): number;
     yAxisPadding(_: number): this;
+    tabNavigation(): boolean;
+    tabNavigation(_: boolean): this;
 }