Skip to content
This repository has been archived by the owner on Oct 17, 2024. It is now read-only.

chore: offboard CLIENT_IM_3364 FF #347

Merged
merged 3 commits into from
Apr 30, 2024
Merged

chore: offboard CLIENT_IM_3364 FF #347

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
f087190
chore: offboard CLIENT_IM_3364 FF
ymchandra Apr 11, 2024
c49a262
Merge branch 'main' into hjf/offboard-ff
ymchandra Apr 29, 2024
5658e11
fix: populate items during initialization
ymchandra Apr 29, 2024
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
27 changes: 2 additions & 25 deletions chart-modules/common/extra/__tests__/chart-style-component.spec.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -104,7 +104,7 @@ describe('Styling options', () => {
},
};
layout.components = [component];
const style = getAxisLabelStyle(chartId, theme, layout, flags);
const style = getAxisLabelStyle(chartId, theme, layout);
expect(style.labels.fontFamily).toEqual('aLabelFont, sans-serif');
expect(style.labels.fontSize).toEqual('2000');
expect(style.labels.fill).toEqual('green');
Expand All @@ -116,35 +116,12 @@ describe('Styling options', () => {
label: { value: { fontFamily: 'vLabelFont, sans-serif', fontSize: '3000', fontColor: { color: 'blue' } } },
};
layout.components = [component];
const style = getValueLabelStyle(chartId, {}, layout, flags);
const style = getValueLabelStyle(chartId, {}, layout);
expect(style.fontFamily).toEqual('vLabelFont, sans-serif');
expect(style.fontSize).toEqual(3000);
expect(style.fill).toEqual('blue');
});

it('should get default values for getValueLabelStyle when FF is disabled', () => {
const component = {
key: 'value',
label: { value: { fontFamily: 'vLabelFont, sans-serif', fontSize: '3000', fontColor: { color: 'blue' } } },
};
flags = {
isEnabled: () => false,
};
const styles = {
label: {
value: {
fontSize: 11,
fontFamily: 'My Font family',
},
},
};
layout.components = [component];
const style = getValueLabelStyle(chartId, styles, layout, flags);
expect(style.fontFamily).toEqual('My Font family');
expect(style.fontSize).toEqual(11);
expect(style.fill).toEqual(undefined);
});

it('should get correct getLegendTitleStyle', () => {
const component = {
key: 'legend',
Expand Down
12 changes: 6 additions & 6 deletions chart-modules/common/extra/chart-style-component.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -71,8 +71,8 @@ export const getChartFontResolver = (theme, translator, chartId, createFontResol

const overrides = (key, layout) => (layout.components || []).find((c) => c.key === key);

export const getAxisTitleStyle = (chartId, theme, layout, flags) => {
const axis = flags.isEnabled('CLIENT_IM_3364') ? overrides('axis', layout)?.axis : {};
export const getAxisTitleStyle = (chartId, theme, layout) => {
const axis = overrides('axis', layout)?.axis;
return {
text: {
fontFamily: axis?.title?.fontFamily || theme.getStyle(chartId, 'axis.title', 'fontFamily'),
Expand All @@ -81,8 +81,8 @@ export const getAxisTitleStyle = (chartId, theme, layout, flags) => {
},
};
};
export const getAxisLabelStyle = (chartId, theme, layout, flags) => {
const axis = flags.isEnabled('CLIENT_IM_3364') ? overrides('axis', layout)?.axis : {};
export const getAxisLabelStyle = (chartId, theme, layout) => {
const axis = overrides('axis', layout)?.axis;
return {
labels: {
fontFamily: axis?.label?.name?.fontFamily || theme.getStyle(chartId, 'axis.label.name', 'fontFamily'),
Expand All @@ -92,8 +92,8 @@ export const getAxisLabelStyle = (chartId, theme, layout, flags) => {
};
};

export const getValueLabelStyle = (chartId, styles, layout, flags) => {
const value = flags.isEnabled('CLIENT_IM_3364') ? overrides('value', layout)?.label : {};
export const getValueLabelStyle = (chartId, styles, layout) => {
const value = overrides('value', layout)?.label;
const fontFamily = value?.value?.fontFamily || styles.label.value.fontFamily;
let fontSize = value?.value?.fontSize || styles.label.value.fontSize;
fontSize = parseFloat(fontSize);
Expand Down
2 changes: 1 addition & 1 deletion charts/boxplot/src/boxplot-properties.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -241,7 +241,7 @@ export default function propertyDefinition(env) {
type: 'items',
translation: 'properties.presentation',
items: {
styleEditor: stylingPanelEnabled && getStylingPanelDefinition(bkgOptionsEnabled, styleOptions, flags),
styleEditor: stylingPanelEnabled && getStylingPanelDefinition(bkgOptionsEnabled, styleOptions),
orientation: {
ref: 'orientation',
type: 'string',
Expand Down
4 changes: 2 additions & 2 deletions charts/boxplot/src/boxplot-view.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -775,8 +775,8 @@ const BoxPlot = ChartView.extend('BoxPlot', {

// ref-lines
refLines: layout.refLine && layout.refLine.refLines,
axisTitleStyle: getAxisTitleStyle(chartID, theme, layout, this.flags),
axisLabelStyle: getAxisLabelStyle(chartID, theme, layout, this.flags),
axisTitleStyle: getAxisTitleStyle(chartID, theme, layout),
axisLabelStyle: getAxisLabelStyle(chartID, theme, layout),
});

const settings = chartBuilder.getSettings();
Expand Down
29 changes: 13 additions & 16 deletions charts/boxplot/src/styling-panel-definition.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,25 +1,22 @@
const getStylingPanelDefinition = (bkgOptionsEnabled, styleOptions, flags) => ({
const getStylingPanelDefinition = (bkgOptionsEnabled, styleOptions) => ({
component: 'styling-panel',
chartTitle: 'Object.BoxPlot',
translation: 'LayerStyleEditor.component.styling',
subtitle: 'LayerStyleEditor.component.styling',
ref: 'components',
useGeneral: true,
useBackground: bkgOptionsEnabled,
items:
flags && flags?.isEnabled('CLIENT_IM_3364')
? {
axisTitleSection: {
translation: 'properties.axis.title',
component: 'panel-section',
items: styleOptions.getOptions('axis', 'axis.title'),
},
axisLabelSection: {
translation: 'properties.axis.label',
component: 'panel-section',
items: styleOptions.getOptions('axis', 'axis.label.name'),
},
}
: undefined,
items: {
axisTitleSection: {
translation: 'properties.axis.title',
component: 'panel-section',
items: styleOptions.getOptions('axis', 'axis.title'),
},
axisLabelSection: {
translation: 'properties.axis.label',
component: 'panel-section',
items: styleOptions.getOptions('axis', 'axis.label.name'),
},
},
});
export default getStylingPanelDefinition;
4 changes: 2 additions & 2 deletions charts/distributionplot/src/distributionplot-view.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -699,8 +699,8 @@ const DistributionPlot = ChartView.extend('DistributionPlot', {

// ref-lines
refLines: layout.refLine && layout.refLine.refLines,
axisTitleStyle: getAxisTitleStyle(CONSTANTS.CHART_ID, theme, layout, this.flags),
axisLabelStyle: getAxisLabelStyle(CONSTANTS.CHART_ID, theme, layout, this.flags),
axisTitleStyle: getAxisTitleStyle(CONSTANTS.CHART_ID, theme, layout),
axisLabelStyle: getAxisLabelStyle(CONSTANTS.CHART_ID, theme, layout),
});

// Box marker
Expand Down
22 changes: 10 additions & 12 deletions charts/distributionplot/src/styling-panel-definition.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,18 +7,16 @@
const getStylingItems = (flags, styleOptions) => {
const items = {};

if (flags?.isEnabled('CLIENT_IM_3364')) {
items.axisTitleSection = {
translation: 'properties.axis.title',
component: 'panel-section',
items: styleOptions.getOptions('axis', 'axis.title'),
};
items.axisLabelSection = {
translation: 'properties.axis.label',
component: 'panel-section',
items: styleOptions.getOptions('axis', 'axis.label.name'),
};
}
items.axisTitleSection = {
translation: 'properties.axis.title',
component: 'panel-section',
items: styleOptions.getOptions('axis', 'axis.title'),
};
items.axisLabelSection = {
translation: 'properties.axis.label',
component: 'panel-section',
items: styleOptions.getOptions('axis', 'axis.label.name'),
};

if (flags?.isEnabled('CLIENT_IM_3051')) {
items.legendTitleSection = {
Expand Down
6 changes: 3 additions & 3 deletions charts/histogram/src/chart-settings/chart-settings.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -205,8 +205,8 @@ function createChartSettings(chartView, layout) {

// ref-lines
refLines: layout.refLine && layout.refLine.refLines,
axisTitleStyle: getAxisTitleStyle(chartID, theme, layout, chartView.flags),
axisLabelStyle: getAxisLabelStyle(chartID, theme, layout, chartView.flags),
axisTitleStyle: getAxisTitleStyle(chartID, theme, layout),
axisLabelStyle: getAxisLabelStyle(chartID, theme, layout),
});

const settings = chartBuilder.getSettings();
Expand All @@ -223,7 +223,7 @@ function createChartSettings(chartView, layout) {
chartBuilder.addComponent('box-marker', boxMarkerSettings);

if (layout.dataPoint && layout.dataPoint.showLabels) {
const binLabelSettings = Label.createSettings(layout, themeService, chartID, chartView.flags);
const binLabelSettings = Label.createSettings(layout, themeService, chartID);
chartBuilder.addComponent('labels', binLabelSettings);
}

Expand Down
9 changes: 3 additions & 6 deletions charts/histogram/src/chart-settings/label.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,9 +5,9 @@ import Color from '@qlik/common/extra/color';
// Implementation details
//

function createLabelSettings(layout, themeService, chartId, flags) {
function createLabelSettings(layout, themeService, chartId) {
const styles = themeService.getStyles();
const valueLabelSettings = getValueLabelStyle(chartId, styles, layout, flags);
const valueLabelSettings = getValueLabelStyle(chartId, styles, layout);
const boxFillColor = valueLabelSettings.fill || styles.label.value.color;
const getContrastColor = () => (ctx) =>
Color.isDark(ctx.node.attrs.fill) ? styles.label.value.lightColor : styles.label.value.darkColor;
Expand All @@ -23,10 +23,7 @@ function createLabelSettings(layout, themeService, chartId, flags) {
placements: [
{ fill: boxFillColor },
{
fill:
flags.isEnabled('CLIENT_IM_3364') && valueLabelSettings.fill
? boxFillColor
: getContrastColor(),
fill: valueLabelSettings.fill ? boxFillColor : getContrastColor(),
},
],
},
Expand Down
2 changes: 1 addition & 1 deletion charts/histogram/src/histogram-properties.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -88,7 +88,7 @@ export default function propertyDefinition(env) {
type: 'items',
translation: 'properties.presentation',
items: {
styleEditor: stylingPanelEnabled && getStylingPanelDefinition(bkgOptionsEnabled, styleOptions, env?.flags),
styleEditor: stylingPanelEnabled && getStylingPanelDefinition(bkgOptionsEnabled, styleOptions),
gridLines: {
type: 'items',
snapshot: {
Expand Down
39 changes: 18 additions & 21 deletions charts/histogram/src/styling-panel-definition.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,30 +1,27 @@
const getStylingPanelDefinition = (bkgOptionsEnabled, styleOptions, flags) => ({
const getStylingPanelDefinition = (bkgOptionsEnabled, styleOptions) => ({
component: 'styling-panel',
chartTitle: 'Object.Histogram',
translation: 'LayerStyleEditor.component.styling',
subtitle: 'LayerStyleEditor.component.styling',
ref: 'components',
useGeneral: true,
useBackground: bkgOptionsEnabled,
items:
flags && flags?.isEnabled('CLIENT_IM_3364')
? {
axisTitleSection: {
translation: 'properties.axis.title',
component: 'panel-section',
items: styleOptions.getOptions('axis', 'axis.title'),
},
axisLabelSection: {
translation: 'properties.axis.label',
component: 'panel-section',
items: styleOptions.getOptions('axis', 'axis.label.name'),
},
valueLabelSection: {
translation: 'properties.value.label',
component: 'panel-section',
items: styleOptions.getOptions('value', 'label.value'),
},
}
: undefined,
items: {
axisTitleSection: {
translation: 'properties.axis.title',
component: 'panel-section',
items: styleOptions.getOptions('axis', 'axis.title'),
},
axisLabelSection: {
translation: 'properties.axis.label',
component: 'panel-section',
items: styleOptions.getOptions('axis', 'axis.label.name'),
},
valueLabelSection: {
translation: 'properties.value.label',
component: 'panel-section',
items: styleOptions.getOptions('value', 'label.value'),
},
},
});
export default getStylingPanelDefinition;
23 changes: 10 additions & 13 deletions charts/waterfallchart/src/styling-panel-property-definiton.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,19 +6,16 @@
*/
const getStylingItems = (flags, styleOptions) => {
const items = {};
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

There is no need to define an empty object first here, you can just populate it with the axis properties right away

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks, fixed it now.


if (flags?.isEnabled('CLIENT_IM_3364')) {
items.axisLabelSection = {
translation: 'properties.axis.label',
component: 'panel-section',
items: styleOptions.getOptions('axis', 'axis.label.name'),
};
items.valueLabelSection = {
translation: 'properties.value.label',
component: 'panel-section',
items: styleOptions.getOptions('value', 'label.value'),
};
}
items.axisLabelSection = {
translation: 'properties.axis.label',
component: 'panel-section',
items: styleOptions.getOptions('axis', 'axis.label.name'),
};
items.valueLabelSection = {
translation: 'properties.value.label',
component: 'panel-section',
items: styleOptions.getOptions('value', 'label.value'),
};

if (flags?.isEnabled('CLIENT_IM_3051')) {
items.legendLabelSection = {
Expand Down
13 changes: 5 additions & 8 deletions charts/waterfallchart/src/waterfallchart-view.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -154,9 +154,9 @@ function getLabel(context) {
return formatting.formatMeasureValue(field, measure);
}

function getBarLabelSettings(themeService, layout, flags) {
function getBarLabelSettings(themeService, layout) {
const styles = themeService.getStyles();
const valueLabelSettings = getValueLabelStyle(chartID, styles, layout, flags);
const valueLabelSettings = getValueLabelStyle(chartID, styles, layout);
const outsideValueColor = valueLabelSettings?.fill || styles.label.value.color;
const darkColor = styles.label.value.darkColor;
const lightColor = styles.label.value.lightColor;
Expand All @@ -176,10 +176,7 @@ function getBarLabelSettings(themeService, layout, flags) {
placements: [
{ fill: outsideValueColor },
{
fill:
flags.isEnabled('CLIENT_IM_3364') && valueLabelSettings?.fill
? outsideValueColor
: getContrastColor(),
fill: valueLabelSettings?.fill ? outsideValueColor : getContrastColor(),
},
{
position: 'opposite',
Expand Down Expand Up @@ -377,7 +374,7 @@ function createChartSettings(layout) {
refLines: layout.refLine && layout.refLine.refLines,

brushActions: this._dependentActions.gestures,
axisLabelStyle: getAxisLabelStyle(chartID, theme, layout, this.flags),
axisLabelStyle: getAxisLabelStyle(chartID, theme, layout),
});

chartBuilder.addComponent('box-marker', getBarSettings(tooltipSettings, layout));
Expand All @@ -399,7 +396,7 @@ function createChartSettings(layout) {
},
});
if (layout.dataPoint.showLabels) {
chartBuilder.addComponent('labels', getBarLabelSettings(themeService, layout, this.flags));
chartBuilder.addComponent('labels', getBarLabelSettings(themeService, layout));
}

// Add snapshot settings
Expand Down
1 change: 0 additions & 1 deletion test/rendering/suites/boxplot/boxplot.spec.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,6 @@ TestGenerator.fromFixtures({
flags: {
SENSECLIENT_IM_2019_BOXPLOT_BG: true,
SENSECLIENT_IM_2019_STYLINGPANEL_BOXPLOT: true,
CLIENT_IM_3364: true,
},
port: 8014,
},
Expand Down
1 change: 0 additions & 1 deletion test/rendering/suites/distplot/distplot.spec.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,6 @@ TestGenerator.fromFixtures({
flags: {
SENSECLIENT_IM_2018_DIST_BG: true,
SENSECLIENT_IM_2018_STYLINGPANEL_DIST_PLOT: true,
CLIENT_IM_3364: true,
CLIENT_IM_3051: true,
},
port: 8015,
Expand Down
1 change: 0 additions & 1 deletion test/rendering/suites/histogram/histogram.spec.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,6 @@ TestGenerator.fromFixtures({
flags: {
SENSECLIENT_IM_2021_HISTOGRAM_BG: true,
SENSECLIENT_IM_2021_STYLINGPANEL_HISTOGRAM: true,
CLIENT_IM_3364: true,
},
port: 8016,
},
Expand Down
1 change: 0 additions & 1 deletion test/rendering/suites/waterfallchart/waterfallchart.spec.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,6 @@ TestGenerator.fromFixtures({
flags: {
SENSECLIENT_IM_2020_STYLINGPANEL_WATERFALLCHART: true,
SENSECLIENT_IM_2020_WATERFALLCHART_BG: true,
CLIENT_IM_3364: true,
CLIENT_IM_3051: true,
},
port: 8017,
Expand Down