Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

refactor(partition): remove config in favor on spec and theme controls #1402

Merged
merged 27 commits into from
Dec 17, 2021
Merged
Show file tree
Hide file tree
Changes from 24 commits
Commits
Show all changes
27 commits
Select commit Hold shift + click to select a range
c378f7c
refactor(partition_charts): remove config in favor on spec and theme …
nickofthyme Sep 22, 2021
700c573
docs: update stories with api changes
nickofthyme Sep 22, 2021
d738187
chore: merge config and theme types, remove unused link and fill labe…
nickofthyme Sep 24, 2021
792323a
fix: add fallback color to color contrast logic
nickofthyme Sep 24, 2021
aef3d0a
fix: contrast logic default bg color
nickofthyme Sep 24, 2021
8e312ce
chore: add chart padding to partitions, update all screenshots
nickofthyme Sep 24, 2021
8471ebf
chore: fix prettier errors
nickofthyme Sep 24, 2021
85b60b3
test: add test for contrast logic changes
nickofthyme Sep 24, 2021
215a21f
fix: api errors and ts version issues
nickofthyme Sep 24, 2021
eb37a98
chore: fix api syntax error
nickofthyme Sep 24, 2021
08beaeb
Merge branch 'master' into partition-theme
nickofthyme Sep 29, 2021
9cdb22e
test: revert chages to vrt
nickofthyme Sep 29, 2021
ce1d0e9
chore: update more vrt screenshots
nickofthyme Sep 29, 2021
9660fc0
Merge branch 'master' into partition-theme
nickofthyme Nov 9, 2021
9bd0bdc
Merge branch 'master' into partition-theme
nickofthyme Dec 16, 2021
4d8328e
chore: fix api chages
nickofthyme Dec 16, 2021
e29f769
chore: rename and export default partition formatter
nickofthyme Dec 16, 2021
35f1d85
chore: export PartitionStyle type
nickofthyme Dec 16, 2021
599e540
chore: update color blend logic
nickofthyme Dec 16, 2021
4872465
fix: linting errors
nickofthyme Dec 16, 2021
0eeaac8
chore: add new textColor fallback to partition theme, fix vrt screens…
nickofthyme Dec 16, 2021
edd2112
test: remove padding on bar chart
nickofthyme Dec 16, 2021
37f4349
test: reduce flame chart maxFontSize on vrt
nickofthyme Dec 16, 2021
1272c7e
chore: update api with textColor fallback prop
nickofthyme Dec 16, 2021
ba31d3e
test: update flame min font size to match previous
nickofthyme Dec 17, 2021
1032416
refactor: color logic to use fallback bg color
nickofthyme Dec 17, 2021
3790580
fix: heatmap contrast logic and verbiage
nickofthyme Dec 17, 2021
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
9 changes: 1 addition & 8 deletions .eslintrc.js
Original file line number Diff line number Diff line change
Expand Up @@ -153,14 +153,7 @@ module.exports = {
ignoreRegExpLiterals: true,
},
],
'no-unused-vars': [
'error',
{
vars: 'all',
args: 'after-used',
ignoreRestSiblings: true,
},
],
'no-unused-vars': 0,
nickofthyme marked this conversation as resolved.
Show resolved Hide resolved
'sort-keys': 0,
'no-irregular-whitespace': 'warn',
'no-unused-expressions': 'error',
Expand Down
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
6 changes: 6 additions & 0 deletions integration/tests/partition_stories.test.ts
Original file line number Diff line number Diff line change
Expand Up @@ -82,4 +82,10 @@ describe('Axis stories', () => {
);
});
});

eachTheme.it(async (_, urlParam) => {
await common.expectChartAtUrlToMatchScreenshot(
`http://localhost:9001/?path=/story/sunburst--value-formatted-with-categorical-color-palette&${urlParam}`,
);
}, 'should render link labels with fallback text color for %s theme');
});
4 changes: 2 additions & 2 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -68,8 +68,8 @@
"@elastic/datemath": "^5.0.3",
"@elastic/eui": "^41.3.0",
"@mdx-js/loader": "^1.6.6",
"@microsoft/api-documenter": "^7.12.7",
"@microsoft/api-extractor": "^7.18.9",
"@microsoft/api-documenter": "^7.13.54",
"@microsoft/api-extractor": "^7.18.11",
monfera marked this conversation as resolved.
Show resolved Hide resolved
"@semantic-release/changelog": "^5.0.1",
"@semantic-release/commit-analyzer": "^8.0.1",
"@semantic-release/exec": "^5.0.0",
Expand Down
65 changes: 44 additions & 21 deletions packages/charts/api/charts.api.md
Original file line number Diff line number Diff line change
Expand Up @@ -51,10 +51,6 @@ export interface AnimKeyframe {
//
// (undocumented)
easingFunction: EasingFunction;
// Warning: (ae-forgotten-export) The symbol "StaticConfig" needs to be exported by the entry point index.d.ts
//
// (undocumented)
keyframeConfig: Partial<StaticConfig>;
// (undocumented)
time: number;
}
Expand Down Expand Up @@ -751,6 +747,9 @@ export const DEFAULT_TOOLTIP_SNAP = true;
// @public
export const DEFAULT_TOOLTIP_TYPE: "vertical";

// @public (undocumented)
export function defaultPartitionValueFormatter(d: number): string;

// @public (undocumented)
export type DefaultSettingsProps = 'id' | 'chartType' | 'specType' | 'rendering' | 'rotation' | 'resizeDebounce' | 'pointerUpdateDebounce' | 'pointerUpdateTrigger' | 'animateData' | 'debug' | 'tooltip' | 'theme' | 'brushAxis' | 'minBrushDelta' | 'externalPointerEvents' | 'showLegend' | 'showLegendExtra' | 'legendPosition' | 'legendMaxDepth' | 'legendSize' | 'ariaUseDefaultSummary' | 'ariaLabelHeadingLevel' | 'ariaTableCaption' | 'allowBrushingLastHistogramBin';

Expand Down Expand Up @@ -1571,7 +1570,7 @@ export interface OrdinalScale {
// @public (undocumented)
export type OutOfRoomCallback = (wordCount: number, renderedWordCount: number, renderedWords: string[]) => void;

// @public (undocumented)
// @public
export type Padding = PerSideDistance;

// @public (undocumented)
Expand All @@ -1589,15 +1588,6 @@ export type PartialTheme = RecursivePartial<Theme>;
// @public (undocumented)
export const Partition: React_2.FunctionComponent<SpecRequiredProps_7 & SpecOptionalProps_7>;

// @public (undocumented)
export interface PartitionConfig extends StaticConfig {
// @alpha (undocumented)
animation: {
duration: TimeMs;
keyframes: Array<AnimKeyframe>;
};
}

// @public (undocumented)
export type PartitionElementEvent = [Array<LayerValue>, SeriesIdentifier];

Expand Down Expand Up @@ -1642,6 +1632,43 @@ export const PartitionLayout: Readonly<{
// @public (undocumented)
export type PartitionLayout = $Values<typeof PartitionLayout>;

// Warning: (ae-forgotten-export) The symbol "FillFontSizeRange" needs to be exported by the entry point index.d.ts
//
// @public (undocumented)
export interface PartitionStyle extends FillFontSizeRange {
// Warning: (ae-forgotten-export) The symbol "Distance" needs to be exported by the entry point index.d.ts
//
// (undocumented)
circlePadding: Distance;
// Warning: (ae-forgotten-export) The symbol "SizeRatio" needs to be exported by the entry point index.d.ts
emptySizeRatio: SizeRatio;
// (undocumented)
fillLabel: PartitionFillLabel;
// Warning: (ae-forgotten-export) The symbol "FontFamily" needs to be exported by the entry point index.d.ts
//
// (undocumented)
fontFamily: FontFamily;
// (undocumented)
horizontalTextAngleThreshold: Radian;
// (undocumented)
horizontalTextEnforcer: Ratio;
// Warning: (ae-forgotten-export) The symbol "LinkLabelConfig" needs to be exported by the entry point index.d.ts
//
// (undocumented)
linkLabel: LinkLabelConfig;
outerSizeRatio: SizeRatio;
// (undocumented)
radialPadding: Distance;
// Warning: (ae-forgotten-export) The symbol "StrokeStyle" needs to be exported by the entry point index.d.ts
//
// (undocumented)
sectorLineStroke: StrokeStyle_2;
// (undocumented)
sectorLineWidth: Pixels;
// (undocumented)
textColor: Color;
}

// @public (undocumented)
export const PATH_KEY = "path";

Expand Down Expand Up @@ -1910,8 +1937,6 @@ export type ScaleType = $Values<typeof ScaleType>;

// @public (undocumented)
export interface SectorGeomSpecY {
// Warning: (ae-forgotten-export) The symbol "Distance" needs to be exported by the entry point index.d.ts
//
// (undocumented)
y0px: Distance;
// (undocumented)
Expand Down Expand Up @@ -2293,14 +2318,13 @@ export interface Theme {
colors: ColorConfig;
// (undocumented)
crosshair: CrosshairStyle;
// (undocumented)
goal: GoalStyles;
// (undocumented)
heatmap: HeatmapStyle;
// (undocumented)
legend: LegendStyle;
lineSeriesStyle: LineSeriesStyle;
markSizeRatio?: number;
partition: PartitionStyle;
// (undocumented)
scales: ScalesConfig;
// (undocumented)
Expand Down Expand Up @@ -2575,9 +2599,8 @@ export type YDomainRange = YDomainBase & DomainRange & LogScaleOptions;

// Warnings were encountered during analysis:
//
// src/chart_types/partition_chart/layout/types/config_types.ts:137:5 - (ae-forgotten-export) The symbol "TimeMs" needs to be exported by the entry point index.d.ts
// src/utils/themes/theme.ts:216:5 - (ae-forgotten-export) The symbol "TextAlign" needs to be exported by the entry point index.d.ts
// src/utils/themes/theme.ts:217:5 - (ae-forgotten-export) The symbol "TextBaseline" needs to be exported by the entry point index.d.ts
// src/utils/themes/theme.ts:217:5 - (ae-forgotten-export) The symbol "TextAlign" needs to be exported by the entry point index.d.ts
// src/utils/themes/theme.ts:218:5 - (ae-forgotten-export) The symbol "TextBaseline" needs to be exported by the entry point index.d.ts

// (No @packageDocumentation comment for this package)

Expand Down
22 changes: 10 additions & 12 deletions packages/charts/src/chart_types/partition_chart/layout/config.ts
Original file line number Diff line number Diff line change
Expand Up @@ -7,16 +7,14 @@
*/

import { Colors } from '../../../common/colors';
import { ConfigItem, configMap, Numeric } from '../../../common/config_objects';
import { ConfigItem, Numeric } from '../../../common/config_objects';
import { GOLDEN_RATIO, TAU } from '../../../common/constants';
import { FONT_STYLES, FONT_VARIANTS } from '../../../common/text_utils';
import { ColorVariant } from '../../../utils/common';
import { Config, PartitionLayout } from './types/config_types';
import { PartitionLayout } from './types/config_types';
import { ShapeTreeNode } from './types/viewmodel_types';
import { AGGREGATE_KEY, STATISTICS_KEY } from './utils/group_by_rollup';

const LOG_10 = Math.log(10);

function significantDigitCount(d: number): number {
let n = Math.abs(parseFloat(String(d).replace('.', '')));
if (n === 0) {
Expand All @@ -25,7 +23,7 @@ function significantDigitCount(d: number): number {
while (n !== 0 && n % 10 === 0) {
n /= 10;
}
return Math.floor(Math.log(n) / LOG_10) + 1;
return Math.floor(Math.log(n) / Math.LN10) + 1;
}

/** @internal */
Expand Down Expand Up @@ -64,7 +62,8 @@ export const VALUE_GETTERS = Object.freeze({ percent: percentValueGetter, ratio:
/** @public */
export type ValueGetterName = keyof typeof VALUE_GETTERS;

function defaultFormatter(d: number): string {
/** @public */
export function defaultPartitionValueFormatter(d: number): string {
markov00 marked this conversation as resolved.
Show resolved Hide resolved
return Math.abs(d) >= 10000000 || Math.abs(d) < 0.001
? d.toExponential(Math.min(2, Math.max(0, significantDigitCount(d) - 1)))
: d.toLocaleString(undefined, {
Expand Down Expand Up @@ -114,7 +113,10 @@ const valueFont = {
},
};

/** @internal */
/**
* Keeping for future config validation checks
* @internal
*/
export const configMetadata: Record<string, ConfigItem> = {
// shape geometry
width: { dflt: 300, min: 0, max: 1024, type: 'number', reconfigurable: false },
Expand Down Expand Up @@ -204,7 +206,7 @@ export const configMetadata: Record<string, ConfigItem> = {
type: 'function',
},
valueFormatter: {
dflt: defaultFormatter,
dflt: defaultPartitionValueFormatter,
type: 'function',
},
valueFont,
Expand Down Expand Up @@ -303,16 +305,12 @@ export const configMetadata: Record<string, ConfigItem> = {
},
},

// other
backgroundColor: { dflt: Colors.White.keyword, type: 'color' },
sectorLineWidth: { dflt: 1, min: 0, max: 4, type: 'number' },
sectorLineStroke: { dflt: Colors.White.keyword, type: 'string' },
animation: { type: 'group', values: { duration: { dflt: 0, min: 0, max: 3000, type: 'number' } } },
};

/** @internal */
export const config: Config = configMap<Config>((item: ConfigItem) => item.dflt, configMetadata);

/**
* Part-to-whole visualizations such as treemap, sunburst, pie hinge on an aggregation
* function such that the value is independent of the order of how the constituents are aggregated
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -6,13 +6,9 @@
* Side Public License, v 1.
*/

import { $Values as Values } from 'utility-types';
import { $Values } from 'utility-types';

import { Color } from '../../../../common/colors';
import { Distance, Pixels, Radian, Radius, Ratio, SizeRatio, TimeMs } from '../../../../common/geometry';
import { Font, FontFamily, PartialFont } from '../../../../common/text_utils';
import { ColorVariant, StrokeStyle, ValueFormatter } from '../../../../utils/common';
import { PerSideDistance } from '../../../../utils/dimensions';
import { Ratio, TimeMs } from '../../../../common/geometry';

/** @public */
export const PartitionLayout = Object.freeze({
Expand All @@ -25,100 +21,7 @@ export const PartitionLayout = Object.freeze({
});

/** @public */
export type PartitionLayout = Values<typeof PartitionLayout>; // could use ValuesType<typeof HierarchicalChartTypes>

/** @public */
export type PerSidePadding = PerSideDistance;

/** @public */
export type Padding = Pixels | Partial<PerSidePadding>;

interface LabelConfig extends Font {
textColor: Color | typeof ColorVariant.Adaptive;
valueFormatter: ValueFormatter;
valueFont: PartialFont;
padding: Padding;
}

/** @public */
export interface FillLabelConfig extends LabelConfig {
clipText: boolean;
}

/** @public */
export interface LinkLabelConfig extends LabelConfig {
fontSize: Pixels; // todo consider putting it in Font
maximumSection: Distance; // use linked labels below this limit
gap: Pixels;
spacing: Pixels;
minimumStemLength: Distance;
stemAngle: Radian;
horizontalStemLength: Distance;
radiusPadding: Distance;
lineWidth: Pixels;
maxCount: number;
maxTextLength: number;
}

/** @public */
export interface FillFontSizeRange {
minFontSize: Pixels;
maxFontSize: Pixels;
idealFontSizeJump: Ratio;
/**
* When `maximizeFontSize` is false (the default), text font will not be larger than font sizes in larger sectors/rectangles in the same pie chart,
* sunburst ring or treemap layer. When it is set to true, the largest font, not exceeding `maxFontSize`, that fits in the slice/sector/rectangle
* will be chosen for easier text readability, irrespective of the value.
*/
maximizeFontSize: boolean;
}

/** @public */
export interface RelativeMargins {
left: SizeRatio;
right: SizeRatio;
top: SizeRatio;
bottom: SizeRatio;
}

// todo switch to `io-ts` style, generic way of combining static and runtime type info
/** @public */
export interface StaticConfig extends FillFontSizeRange {
// shape geometry
width: number;
height: number;
margin: RelativeMargins;
emptySizeRatio: SizeRatio;
outerSizeRatio: SizeRatio;
clockwiseSectors: boolean;
specialFirstInnermostSector: boolean;
partitionLayout: PartitionLayout;
/** @alpha */
drilldown: boolean;

// general text config
fontFamily: FontFamily;

// fill text layout config
circlePadding: Distance;
radialPadding: Distance;
horizontalTextAngleThreshold: Radian;
horizontalTextEnforcer: Ratio;
maxRowCount: number;
fillOutside: boolean;
radiusOutside: Radius;
fillRectangleWidth: Distance;
fillRectangleHeight: Distance;
fillLabel: FillLabelConfig;

// linked labels (primarily: single-line)
linkLabel: LinkLabelConfig;

// global
backgroundColor: Color;
sectorLineWidth: Pixels;
sectorLineStroke: StrokeStyle;
}
export type PartitionLayout = $Values<typeof PartitionLayout>; // could use ValuesType<typeof HierarchicalChartTypes>

/** @alpha */
export type EasingFunction = (x: Ratio) => Ratio;
Expand All @@ -127,14 +30,14 @@ export type EasingFunction = (x: Ratio) => Ratio;
export interface AnimKeyframe {
time: number;
easingFunction: EasingFunction;
keyframeConfig: Partial<StaticConfig>;
// keyframeConfig: Partial<StaticConfig>;
}

/** @public */
export interface Config extends StaticConfig {
export interface AnimationConfig {
/** @alpha */
animation: {
animation?: {
duration: TimeMs;
keyframes: Array<AnimKeyframe>;
keyframes?: Array<AnimKeyframe>;
nickofthyme marked this conversation as resolved.
Show resolved Hide resolved
};
}
Loading