Merge branch 'master' into add_legend_to_partition

.github/ISSUE_TEMPLATE/bug_report.md

@@ -17,15 +17,15 @@ Steps to reproduce the behavior:
 3. Scroll down to '....'
 4. See error
 
-**Expected behavior**
+**Expected behaviour**
 A clear and concise description of what you expected to happen.
 
 **Screenshots**
 If applicable, add screenshots to help explain your problem.
 
 **Version (please complete the following information):**
  - OS: [e.g. iOS]
- - Browser [e.g. chrome, safari]
+ - Browser: [e.g. chrome, safari]
  - Elastic Charts: [e.g. 1.0.1]
 
 **Additional context**
@@ -40,5 +40,8 @@ Add any [Kibana](https://github.com/elastic/kibana) related issues here.
 
 
 **Checklist**
+
+Delete any items that are not applicable to this issue.
+
 - [ ] every related Kibana issue is listed under `Kibana Cross Issues` list
 - [ ] `kibana cross issue` tag is associated to the issue if any kibana cross issue is present

.github/ISSUE_TEMPLATE/feature_request.md

@@ -23,6 +23,8 @@ Add any [Kibana](https://github.com/elastic/kibana) related issues/feature reque
 
 **Checklist**
 
+Delete any items that are not applicable to this feature request.
+
 - [ ] this request is checked against already exist requests
 - [ ] every related Kibana issue is listed under `Kibana Cross Issues` list
 - [ ] `kibana cross issue` tag is associated to the issue if any kibana cross issue is present

.github/pull_request_template.md

@@ -6,10 +6,9 @@ If it involves visual changes include a screenshot or gif.
 
 ### Checklist
 
-Use ~~strikethroughs~~ to remove checklist items you don't feel are applicable to this PR.
+Delete any items that are not applicable to this PR.
 
 - [ ] Any consumer-facing exports were added to `src/index.ts` (and stories only import from `../src` except for test data & storybook)
 - [ ] This was checked for cross-browser compatibility, [including a check against IE11](https://github.com/elastic/kibana/blob/master/CONTRIBUTING.md#cross-browser-compatibility)
 - [ ] Proper documentation or storybook story was added for features that require explanation or tutorials
 - [ ] Unit tests were updated or added to match the most common scenarios
-- [ ] Each commit follows the [convention](https://github.com/elastic/elastic-charts/blob/master/CONTRIBUTING.md)

CHANGELOG.md

@@ -1,3 +1,15 @@
+# [18.2.0](https://github.com/elastic/elastic-charts/compare/v18.1.0...v18.2.0) (2020-03-26)
+
+
+### Bug Fixes
+
+* **line_annotation:** keep the spec in state after chart rerender ([#605](https://github.com/elastic/elastic-charts/issues/605)) ([43c13f1](https://github.com/elastic/elastic-charts/commit/43c13f1a9652e9a50b7f9cf25a84a7a772695f81)), closes [#604](https://github.com/elastic/elastic-charts/issues/604)
+
+
+### Features
+
+* **partition:** stroke configuration and linked label value font format ([#602](https://github.com/elastic/elastic-charts/issues/602)) ([7dce0a3](https://github.com/elastic/elastic-charts/commit/7dce0a3598d4c4e59087bcb086a5d520381485cb))
+
 # [18.1.0](https://github.com/elastic/elastic-charts/compare/v18.0.0...v18.1.0) (2020-03-18)
 
 

package.json

@@ -1,7 +1,7 @@
 {
   "name": "@elastic/charts",
   "description": "Elastic-Charts data visualization library",
-  "version": "18.1.0",
+  "version": "18.2.0",
   "author": "Marco Vettorello <[email protected]>",
   "license": "Apache-2.0",
   "main": "dist/index.js",

src/chart_types/partition_chart/layout/config/config.ts

@@ -60,6 +60,25 @@ export function percentFormatter(d: number): string {
   return `${Math.round(d)}%`;
 }
 
+const fontSettings = {
+  fontFamily: {
+    dflt: 'Sans-Serif',
+    type: 'string',
+  },
+  fontSize: { dflt: 12, min: 4, max: 32, type: 'number' },
+  fontStyle: {
+    dflt: 'normal',
+    type: 'string',
+    values: FONT_STYLES,
+  },
+  fontVariant: {
+    dflt: 'normal',
+    type: 'string',
+    values: FONT_VARIANTS,
+  },
+  fontWeight: { dflt: 400, min: 100, max: 900, type: 'number' },
+};
+
 const valueFont = {
   type: 'group',
   values: {
@@ -70,17 +89,9 @@ const valueFont = {
       type: 'string',
     },
    */
-    fontWeight: { dflt: 400, min: 100, max: 900, type: 'number' },
-    fontStyle: {
-      dflt: 'normal',
-      type: 'string',
-      values: FONT_STYLES,
-    },
-    fontVariant: {
-      dflt: 'normal',
-      type: 'string',
-      values: FONT_VARIANTS,
-    },
+    fontWeight: fontSettings.fontWeight,
+    fontStyle: fontSettings.fontStyle,
+    fontVariant: fontSettings.fontVariant,
   },
 };
 
@@ -161,17 +172,7 @@ export const configMetadata = {
     values: {
       textColor: { dflt: '#000000', type: 'color' },
       textInvertible: { dflt: false, type: 'boolean' },
-      fontWeight: { dflt: 400, min: 100, max: 900, type: 'number' },
-      fontStyle: {
-        dflt: 'normal',
-        type: 'string',
-        values: FONT_STYLES,
-      },
-      fontVariant: {
-        dflt: 'normal',
-        type: 'string',
-        values: FONT_VARIANTS,
-      },
+      ...fontSettings,
       valueGetter: {
         dflt: sumValueGetter,
         type: 'function',
@@ -196,7 +197,7 @@ export const configMetadata = {
         reconfigurable: true,
         documentation: 'Uses linked labels below this limit of the outer sector arc length (in pixels)',
       },
-      fontSize: { dflt: 12, min: 4, max: 32, type: 'number' },
+      ...fontSettings,
       gap: { dflt: 10, min: 6, max: 16, type: 'number' },
       spacing: { dflt: 2, min: 0, max: 16, type: 'number' },
       horizontalStemLength: { dflt: 10, min: 6, max: 16, type: 'number' },
@@ -233,6 +234,7 @@ export const configMetadata = {
   // other
   backgroundColor: { dflt: '#ffffff', type: 'color' },
   sectorLineWidth: { dflt: 1, min: 0, max: 4, type: 'number' },
+  sectorLineStroke: { dflt: 'white', type: 'string' },
   colors: { dflt: 'turbo', type: 'palette', values: Object.keys(palettes) },
   palettes: { dflt: palettes, type: 'palettes', reconfigurable: false },
 };

src/chart_types/partition_chart/layout/types/config_types.ts

@@ -19,7 +19,7 @@
 import { Distance, Pixels, Radian, Radius, Ratio, SizeRatio, TimeMs } from './geometry_types';
 import { Font, FontFamily, PartialFont } from './types';
 import { $Values as Values } from 'utility-types';
-import { Color, ValueFormatter } from '../../../../utils/commons';
+import { Color, StrokeStyle, ValueFormatter } from '../../../../utils/commons';
 
 export const PartitionLayout = Object.freeze({
   sunburst: 'sunburst' as 'sunburst',
@@ -86,9 +86,10 @@ export interface StaticConfig {
   // linked labels (primarily: single-line)
   linkLabel: LinkLabelConfig;
 
-  // other
+  // global
   backgroundColor: Color;
   sectorLineWidth: Pixels;
+  sectorLineStroke: StrokeStyle;
 }
 
 export type EasingFunction = (x: Ratio) => Ratio;

src/chart_types/partition_chart/layout/types/viewmodel_types.ts

@@ -30,7 +30,10 @@ export type LinkLabelVM = {
   text: string;
   valueText: string;
   width: Distance;
+  valueWidth: Distance;
   verticalOffset: Distance;
+  labelFontSpec: Font;
+  valueFontSpec: Font;
 };
 
 export interface RowBox extends Font {
@@ -65,6 +68,7 @@ export interface RowSet {
 
 export interface QuadViewModel extends ShapeTreeNode {
   strokeWidth: number;
+  strokeStyle: string;
   fillColor: string;
 }
 

src/chart_types/partition_chart/layout/viewmodel/link_text_layout.ts

@@ -70,9 +70,26 @@ export function linkTextLayout(
       const stemToX = x + north * west * cy - west * relativeY;
       const stemToY = cy;
       const text = rawTextGetter(node);
-      const { width, emHeightAscent, emHeightDescent } = measure(linkLabel.fontSize, [
-        { fontFamily: config.fontFamily, ...linkLabel, text },
-      ])[0];
+      const valueText = valueFormatter(valueGetter(node));
+      const labelFontSpec = {
+        fontStyle: 'normal',
+        fontVariant: 'normal',
+        fontFamily: config.fontFamily,
+        fontWeight: 'normal',
+        ...linkLabel,
+        text,
+      };
+      const valueFontSpec = {
+        fontStyle: 'normal',
+        fontVariant: 'normal',
+        fontFamily: config.fontFamily,
+        fontWeight: 'normal',
+        ...linkLabel,
+        ...linkLabel.valueFont,
+        text: valueText,
+      };
+      const { width, emHeightAscent, emHeightDescent } = measure(linkLabel.fontSize, [labelFontSpec])[0];
+      const { width: valueWidth } = measure(linkLabel.fontSize, [valueFontSpec])[0];
       return {
         link: [
           [x0, y0],
@@ -83,9 +100,12 @@ export function linkTextLayout(
         translate: [stemToX + west * (linkLabel.horizontalStemLength + linkLabel.gap), stemToY],
         textAlign: side ? 'left' : 'right',
         text,
-        valueText: valueFormatter(valueGetter(node)),
+        valueText,
         width,
+        valueWidth,
         verticalOffset: -(emHeightDescent + emHeightAscent) / 2, // meaning, `middle`
+        labelFontSpec,
+        valueFontSpec,
       };
     });
 }

src/chart_types/partition_chart/layout/viewmodel/viewmodel.ts

@@ -57,7 +57,7 @@ import {
   sortIndexAccessor,
   HierarchyOfArrays,
 } from '../utils/group_by_rollup';
-import { ValueFormatter } from '../../../../utils/commons';
+import { StrokeStyle, ValueFormatter } from '../../../../utils/commons';
 import { percentValueGetter } from '../config/config';
 
 function paddingAccessor(n: ArrayEntry) {
@@ -94,6 +94,7 @@ export function makeQuadViewModel(
   childNodes: ShapeTreeNode[],
   layers: Layer[],
   sectorLineWidth: Pixels,
+  sectorLineStroke: StrokeStyle,
 ): Array<QuadViewModel> {
   return childNodes.map((node) => {
     const opacityMultiplier = 1; // could alter in the future, eg. in response to interactions
@@ -104,7 +105,8 @@ export function makeQuadViewModel(
     const { r, g, b, opacity } = stringToRGB(shapeFillColor);
     const fillColor = argsToRGBString(r, g, b, opacity * opacityMultiplier);
     const strokeWidth = sectorLineWidth;
-    return { strokeWidth, fillColor, ...node };
+    const strokeStyle = sectorLineStroke;
+    return { strokeWidth, strokeStyle, fillColor, ...node };
   });
 }
 
@@ -159,6 +161,7 @@ export function shapeViewModel(
     specialFirstInnermostSector,
     minFontSize,
     partitionLayout,
+    sectorLineWidth,
   } = config;
 
   const innerWidth = width * (1 - Math.min(1, margin.left + margin.right));
@@ -195,7 +198,7 @@ export function shapeViewModel(
 
   // use the smaller of the two sizes, as a circle fits into a square
   const circleMaximumSize = Math.min(innerWidth, innerHeight);
-  const outerRadius: Radius = (outerSizeRatio * circleMaximumSize) / 2;
+  const outerRadius: Radius = Math.min(outerSizeRatio * circleMaximumSize, circleMaximumSize - sectorLineWidth) / 2;
   const innerRadius: Radius = outerRadius - (1 - emptySizeRatio) * outerRadius;
   const treeHeight = shownChildNodes.reduce((p: number, n: any) => Math.max(p, entryValue(n.node).depth), 0); // 1: pie, 2: two-ring donut etc.
   const ringThickness = (outerRadius - innerRadius) / treeHeight;
@@ -222,6 +225,7 @@ export function shapeViewModel(
     ),
     layers,
     config.sectorLineWidth,
+    config.sectorLineStroke,
   );
 
   // fill text