Protei/PromucFlow_constructor
2
0
Fork 0
Code Issues Pull Requests Actions 2 Packages Projects Releases Wiki Activity

fix: Change "Allow Horizontal Scroll" text to "Allow scroll" (#8085)

Browse Source 
* chore: Change "Allow Horizontal Scroll" to "Allow Scroll"

* chore: Hide option to choose scroll for pie chart

* fix: Fix prettier errors

* feat: Add migration to allowScroll for `CHART_WIDGET`s

Closes #4227

* fix: Fix chart widget prop recursively

Per https://github.com/appsmithorg/appsmith/pull/8085#discussion_r733442011
Closes #4227
This commit is contained in:
Rafael Baldasso Audibert 2021-10-25 13:39:39 +02:00 committed by GitHub
parent 87ed846194
commit 0e22f26621
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
20 changed files with 64 additions and 54 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
app/client/cypress/fixtures/ChartDsl.json
View File

@ -24,7 +24,7 @@
"widgetName": "Chart1", "widgetName": "Chart1",
"chartType": "BAR_CHART", "chartType": "BAR_CHART",
"chartName": "Sales on working days", "chartName": "Sales on working days",
"allowHorizontalScroll": false, "allowScroll": false,
"version": 1, "version": 1,
"chartData": [ "chartData": [
{ {

2
app/client/cypress/fixtures/ChartTextDsl.json
View File

@ -57,7 +57,7 @@
"widgetName": "Chart1", "widgetName": "Chart1",
"chartType": "LINE_CHART", "chartType": "LINE_CHART",
"chartName": "Sales on working days", "chartName": "Sales on working days",
"allowHorizontalScroll": false, "allowScroll": false,
"chartData": { "chartData": {
"some-random-id": {"seriesName":"Sales","data": []} "some-random-id": {"seriesName":"Sales","data": []}
}, },

2
app/client/cypress/fixtures/chartUpdatedDsl.json
View File

@ -107,7 +107,7 @@
"widgetName": "Chart1", "widgetName": "Chart1",
"chartType": "LINE_CHART", "chartType": "LINE_CHART",
"chartName": "Last week's revenue", "chartName": "Last week's revenue",
"allowHorizontalScroll": false, "allowScroll": false,
"version": 1, "version": 1,
"chartData": { "chartData": {
"q4pm3w97mo": { "q4pm3w97mo": {

2
app/client/cypress/fixtures/displayWidgetDsl.json
View File

@ -114,7 +114,7 @@
"widgetName": "Chart1", "widgetName": "Chart1",
"chartType": "LINE_CHART", "chartType": "LINE_CHART",
"chartName": "Sales on working days", "chartName": "Sales on working days",
"allowHorizontalScroll": false, "allowScroll": false,
"chartData": [ "chartData": [
{ {
"seriesName": "Sales", "seriesName": "Sales",

2
app/client/cypress/fixtures/viewdsl.json
View File

@ -147,7 +147,7 @@
"widgetName": "Chart1", "widgetName": "Chart1",
"chartType": "BAR_CHART", "chartType": "BAR_CHART",
"chartName": "App Sign Up", "chartName": "App Sign Up",
"allowHorizontalScroll": false, "allowScroll": false,
"chartData": [ "chartData": [
{ {
"seriesName": "Sales", "seriesName": "Sales",

2
app/client/cypress/fixtures/widgetSelection.json
View File

@ -23,7 +23,7 @@
{ {
"widgetName": "Chart1", "widgetName": "Chart1",
"rightColumn": 26, "rightColumn": 26,
"allowHorizontalScroll": false, "allowScroll": false,
"widgetId": "ypstklohw5", "widgetId": "ypstklohw5",
"topRow": 4, "topRow": 4,
"bottomRow": 36, "bottomRow": 36,

4
app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/DisplayWidgets/Chart_spec.js
View File

@ -292,13 +292,13 @@ describe("Chart Widget Functionality", function() {
}); });
it("Chart Widget Functionality To Uncheck Horizontal Scroll Visible", function() { it("Chart Widget Functionality To Uncheck Horizontal Scroll Visible", function() {
cy.togglebarDisable(commonlocators.horizontalScroll); cy.togglebarDisable(commonlocators.allowScroll);
cy.PublishtheApp(); cy.PublishtheApp();
cy.get(publish.horizontalTab).should("not.exist"); cy.get(publish.horizontalTab).should("not.exist");
}); });
it("Chart Widget Functionality To Check Horizontal Scroll Visible", function() { it("Chart Widget Functionality To Check Horizontal Scroll Visible", function() {
cy.togglebar(commonlocators.horizontalScroll); cy.togglebar(commonlocators.allowScroll);
cy.PublishtheApp(); cy.PublishtheApp();
cy.get(publish.horizontalTab) cy.get(publish.horizontalTab)
.eq(1) .eq(1)

2
app/client/cypress/locators/commonlocators.json
View File

@ -40,7 +40,7 @@
"TableRow": ".t--draggable-tablewidget .tbody", "TableRow": ".t--draggable-tablewidget .tbody",
"Disablejs": ".t--property-control-disabled", "Disablejs": ".t--property-control-disabled",
"requiredjs": ".t--property-control-required", "requiredjs": ".t--property-control-required",
"horizontalScroll": ".t--property-control-allowhorizontalscroll input", "allowScroll": ".t--property-control-allowscroll input",
"tableInner": ".t--draggable-tablewidget span.t--widget-name", "tableInner": ".t--draggable-tablewidget span.t--widget-name",
"pdfSupport": ".t--property-control-pdfexport input", "pdfSupport": ".t--property-control-pdfexport input",
"ExcelSupport": ".t--property-control-excelexport input", "ExcelSupport": ".t--property-control-excelexport input",

2
app/client/src/comments/dsl.json
View File

@ -68,7 +68,7 @@
"widgetName":"Chart1", "widgetName":"Chart1",
"chartType":"LINE_CHART", "chartType":"LINE_CHART",
"chartName":"Sales on working days", "chartName":"Sales on working days",
"allowHorizontalScroll":false, "allowScroll":false,
"version":1, "version":1,
"chartData":[ "chartData":[
{ {

2
app/client/src/constants/WidgetConstants.tsx
View File

@ -69,7 +69,7 @@ export const layoutConfigurations: LayoutConfigurations = {
FLUID: { minWidth: -1, maxWidth: -1 }, FLUID: { minWidth: -1, maxWidth: -1 },
}; };
export const LATEST_PAGE_VERSION = 43; export const LATEST_PAGE_VERSION = 44;
export const GridDefaults = { export const GridDefaults = {
DEFAULT_CELL_SIZE: 1, DEFAULT_CELL_SIZE: 1,

2
app/client/src/entities/Widget/utils.test.ts
View File

@ -223,7 +223,7 @@ describe("getAllPathsFromPropertyConfig", () => {
widgetName: "Chart1", widgetName: "Chart1",
chartType: "LINE_CHART", chartType: "LINE_CHART",
chartName: "Sales on working days", chartName: "Sales on working days",
allowHorizontalScroll: false, allowScroll: false,
version: 1, version: 1,
chartData: { chartData: {
"random-id": { "random-id": {

24
app/client/src/utils/DSLMigrations.ts
View File

@ -39,6 +39,7 @@ import { ButtonStyleTypes, ButtonVariantTypes } from "../components/constants";
import { Colors } from "../constants/Colors"; import { Colors } from "../constants/Colors";
import { migrateResizableModalWidgetProperties } from "./migrations/ModalWidget"; import { migrateResizableModalWidgetProperties } from "./migrations/ModalWidget";
import { migrateMapWidgetIsClickedMarkerCentered } from "./migrations/MapWidget"; import { migrateMapWidgetIsClickedMarkerCentered } from "./migrations/MapWidget";
import { DSLWidget } from "widgets/constants";
/** /**
* adds logBlackList key for all list widget children * adds logBlackList key for all list widget children
@ -292,6 +293,24 @@ const mapDataMigration = (currentDSL: ContainerWidgetProps<WidgetProps>) => {
return currentDSL; return currentDSL;
}; };
const mapAllowHorizontalScrollMigration = (
currentDSL: ContainerWidgetProps<WidgetProps>,
) => {
currentDSL.children = currentDSL.children?.map((child: DSLWidget) => {
if (child.type === "CHART_WIDGET") {
child.allowScroll = child.allowHorizontalScroll;
delete child.allowHorizontalScroll;
}
if (Array.isArray(child.children) && child.children.length > 0)
child = mapAllowHorizontalScrollMigration(child);
return child;
});
return currentDSL;
};
const tabsWidgetTabsPropertyMigration = ( const tabsWidgetTabsPropertyMigration = (
currentDSL: ContainerWidgetProps<WidgetProps>, currentDSL: ContainerWidgetProps<WidgetProps>,
) => { ) => {
@ -949,6 +968,11 @@ export const transformDSL = (
if (currentDSL.version === 42) { if (currentDSL.version === 42) {
currentDSL = migrateMapWidgetIsClickedMarkerCentered(currentDSL); currentDSL = migrateMapWidgetIsClickedMarkerCentered(currentDSL);
currentDSL.version = 43;
}
if (currentDSL.version === 43) {
currentDSL = mapAllowHorizontalScrollMigration(currentDSL);
currentDSL.version = LATEST_PAGE_VERSION; currentDSL.version = LATEST_PAGE_VERSION;
} }

35
app/client/src/widgets/ChartWidget/component/index.tsx
View File

@ -44,7 +44,7 @@ FusionCharts.options.license({
}); });
export interface ChartComponentProps { export interface ChartComponentProps {
allowHorizontalScroll: boolean; allowScroll: boolean;
chartData: AllChartData; chartData: AllChartData;
chartName: string; chartName: string;
chartType: ChartType; chartType: ChartType;
@ -81,38 +81,26 @@ class ChartComponent extends React.Component<ChartComponentProps> {
chartContainerId = this.props.widgetId + "chart-container"; chartContainerId = this.props.widgetId + "chart-container";
getChartType = () => { getChartType = () => {
const { allowHorizontalScroll, chartData, chartType } = this.props; const { allowScroll, chartData, chartType } = this.props;
const dataLength = Object.keys(chartData).length; const dataLength = Object.keys(chartData).length;
const isMSChart = dataLength > 1; const isMSChart = dataLength > 1;
switch (chartType) { switch (chartType) {
case "PIE_CHART": case "PIE_CHART":
return "pie2d"; return "pie2d";
case "LINE_CHART": case "LINE_CHART":
return allowHorizontalScroll return allowScroll ? "scrollline2d" : isMSChart ? "msline" : "line";
? "scrollline2d"
: isMSChart
? "msline"
: "line";
case "BAR_CHART": case "BAR_CHART":
return allowHorizontalScroll return allowScroll ? "scrollBar2D" : isMSChart ? "msbar2d" : "bar2d";
? "scrollBar2D" case "AREA_CHART":
: isMSChart return allowScroll ? "scrollarea2d" : isMSChart ? "msarea" : "area2d";
? "msbar2d"
: "bar2d";
case "COLUMN_CHART": case "COLUMN_CHART":
return allowHorizontalScroll return allowScroll
? "scrollColumn2D" ? "scrollColumn2D"
: isMSChart : isMSChart
? "mscolumn2d" ? "mscolumn2d"
: "column2d"; : "column2d";
case "AREA_CHART":
return allowHorizontalScroll
? "scrollarea2d"
: isMSChart
? "msarea"
: "area2d";
default: default:
return allowHorizontalScroll ? "scrollColumn2D" : "mscolumn2d"; return allowScroll ? "scrollColumn2D" : "mscolumn2d";
} }
}; };
@ -396,7 +384,7 @@ class ChartComponent extends React.Component<ChartComponentProps> {
return; return;
} }
const dataSource = const dataSource =
this.props.allowHorizontalScroll && this.props.chartType !== "PIE_CHART" this.props.allowScroll && this.props.chartType !== "PIE_CHART"
? this.getScrollChartDataSource() ? this.getScrollChartDataSource()
: this.getChartDataSource(); : this.getChartDataSource();
@ -470,10 +458,7 @@ class ChartComponent extends React.Component<ChartComponentProps> {
} }
const chartType = this.getChartType(); const chartType = this.getChartType();
this.chartInstance.chartType(chartType); this.chartInstance.chartType(chartType);
if ( if (this.props.allowScroll && this.props.chartType !== "PIE_CHART") {
this.props.allowHorizontalScroll &&
this.props.chartType !== "PIE_CHART"
) {
this.chartInstance.setChartData(this.getScrollChartDataSource()); this.chartInstance.setChartData(this.getScrollChartDataSource());
} else { } else {
this.chartInstance.setChartData(this.getChartDataSource()); this.chartInstance.setChartData(this.getChartDataSource());

2
app/client/src/widgets/ChartWidget/index.ts
View File

@ -15,7 +15,7 @@ export const CONFIG = {
widgetName: "Chart", widgetName: "Chart",
chartType: "COLUMN_CHART", chartType: "COLUMN_CHART",
chartName: "Sales Report", chartName: "Sales Report",
allowHorizontalScroll: false, allowScroll: false,
version: 1, version: 1,
chartData: { chartData: {
[generateReactKey()]: { [generateReactKey()]: {

4
app/client/src/widgets/ChartWidget/widget/index.tsx
View File

@ -52,7 +52,7 @@ class ChartWidget extends BaseWidget<ChartWidgetProps, WidgetState> {
return ( return (
<Suspense fallback={<Skeleton />}> <Suspense fallback={<Skeleton />}>
<ChartComponent <ChartComponent
allowHorizontalScroll={this.props.allowHorizontalScroll} allowScroll={this.props.allowScroll}
chartData={this.props.chartData} chartData={this.props.chartData}
chartName={this.props.chartName} chartName={this.props.chartName}
chartType={this.props.chartType} chartType={this.props.chartType}
@ -83,7 +83,7 @@ export interface ChartWidgetProps extends WidgetProps {
yAxisName: string; yAxisName: string;
chartName: string; chartName: string;
isVisible?: boolean; isVisible?: boolean;
allowHorizontalScroll: boolean; allowScroll: boolean;
} }
type ChartComponentPartialProps = Omit<ChartComponentProps, "onDataPointClick">; type ChartComponentPartialProps = Omit<ChartComponentProps, "onDataPointClick">;

7
app/client/src/widgets/ChartWidget/widget/propertyConfig.ts
View File

@ -216,12 +216,13 @@ export default [
}, },
{ {
helpText: "Enables scrolling inside the chart", helpText: "Enables scrolling inside the chart",
propertyName: "allowHorizontalScroll", propertyName: "allowScroll",
label: "Allow horizontal scroll", label: "Allow scroll",
controlType: "SWITCH", controlType: "SWITCH",
isBindProperty: false, isBindProperty: false,
isTriggerProperty: false, isTriggerProperty: false,
hidden: (x: ChartWidgetProps) => x.chartType === "CUSTOM_FUSION_CHART", hidden: (x: ChartWidgetProps) =>
x.chartType === "CUSTOM_FUSION_CHART" || x.chartType === "PIE_CHART",
dependencies: ["chartType"], dependencies: ["chartType"],
}, },
], ],

2
app/client/test/factories/Widgets/ChartFactory.ts
View File

@ -6,7 +6,7 @@ export const ChartFactory = Factory.Sync.makeFactory<WidgetProps>({
isVisible: true, isVisible: true,
chartType: "LINE_CHART", chartType: "LINE_CHART",
chartName: "Sales on working days", chartName: "Sales on working days",
allowHorizontalScroll: false, allowScroll: false,
chartData: [ chartData: [
{ {
seriesName: "Sales", seriesName: "Sales",

12
app/server/appsmith-server/src/main/resources/examples-organization.json
View File

@ -164,7 +164,7 @@
{ {
"widgetName": "Chart1", "widgetName": "Chart1",
"rightColumn": 8, "rightColumn": 8,
"allowHorizontalScroll": false, "allowScroll": false,
"widgetId": "n536wy81vu", "widgetId": "n536wy81vu",
"topRow": 3, "topRow": 3,
"bottomRow": 14, "bottomRow": 14,
@ -324,7 +324,7 @@
{ {
"widgetName": "Chart1", "widgetName": "Chart1",
"rightColumn": 8, "rightColumn": 8,
"allowHorizontalScroll": false, "allowScroll": false,
"widgetId": "n536wy81vu", "widgetId": "n536wy81vu",
"topRow": 3, "topRow": 3,
"bottomRow": 14, "bottomRow": 14,
@ -537,7 +537,7 @@
{ {
"widgetName": "Chart1", "widgetName": "Chart1",
"rightColumn": 8, "rightColumn": 8,
"allowHorizontalScroll": false, "allowScroll": false,
"widgetId": "ul3c5oquih", "widgetId": "ul3c5oquih",
"topRow": 4, "topRow": 4,
"bottomRow": 14, "bottomRow": 14,
@ -801,7 +801,7 @@
{ {
"widgetName": "Chart1", "widgetName": "Chart1",
"rightColumn": 8, "rightColumn": 8,
"allowHorizontalScroll": false, "allowScroll": false,
"widgetId": "ul3c5oquih", "widgetId": "ul3c5oquih",
"topRow": 4, "topRow": 4,
"bottomRow": 14, "bottomRow": 14,
@ -2856,7 +2856,7 @@
"widgetName": "Chart1", "widgetName": "Chart1",
"chartType": "PIE_CHART", "chartType": "PIE_CHART",
"chartName": "Orders", "chartName": "Orders",
"allowHorizontalScroll": false, "allowScroll": false,
"chartData": "[{\"seriesName\":\"Order Status\",\"data\":\"[\\n {\\n \\\"x\\\": \\\"ORDER_PLACED\\\",\\n \\\"y\\\": {{getOrders.data.filter((order) => { return order.status === \\\"ORDER_PLACED\\\" }).length}}\\n },\\n {\\n \\\"x\\\": \\\"OUT_FOR_DELIVERY\\\",\\n \\\"y\\\": {{getOrders.data.filter((order) => { return order.status === \\\"OUT_FOR_DELIVERY\\\" }).length}}\\n },\\n {\\n \\\"x\\\": \\\"PAYMENT_PENDING\\\",\\n \\\"y\\\": {{getOrders.data.filter((order) => { return order.status === \\\"PAYMENT_PENDING\\\" }).length}}\\n },\\n {\\n \\\"x\\\": \\\"REFUNDED\\\",\\n \\\"y\\\": {{getOrders.data.filter((order) => { return order.status === \\\"REFUNDED\\\" }).length}}\\n }\\n \\n]\"}]", "chartData": "[{\"seriesName\":\"Order Status\",\"data\":\"[\\n {\\n \\\"x\\\": \\\"ORDER_PLACED\\\",\\n \\\"y\\\": {{getOrders.data.filter((order) => { return order.status === \\\"ORDER_PLACED\\\" }).length}}\\n },\\n {\\n \\\"x\\\": \\\"OUT_FOR_DELIVERY\\\",\\n \\\"y\\\": {{getOrders.data.filter((order) => { return order.status === \\\"OUT_FOR_DELIVERY\\\" }).length}}\\n },\\n {\\n \\\"x\\\": \\\"PAYMENT_PENDING\\\",\\n \\\"y\\\": {{getOrders.data.filter((order) => { return order.status === \\\"PAYMENT_PENDING\\\" }).length}}\\n },\\n {\\n \\\"x\\\": \\\"REFUNDED\\\",\\n \\\"y\\\": {{getOrders.data.filter((order) => { return order.status === \\\"REFUNDED\\\" }).length}}\\n }\\n \\n]\"}]",
"xAxisName": "Last Week", "xAxisName": "Last Week",
"yAxisName": "Total Order Revenue $", "yAxisName": "Total Order Revenue $",
@ -4277,7 +4277,7 @@
"widgetName": "Chart1", "widgetName": "Chart1",
"chartType": "PIE_CHART", "chartType": "PIE_CHART",
"chartName": "Orders", "chartName": "Orders",
"allowHorizontalScroll": false, "allowScroll": false,
"chartData": "[{\"seriesName\":\"Order Status\",\"data\":\"[\\n {\\n \\\"x\\\": \\\"ORDER_PLACED\\\",\\n \\\"y\\\": {{getOrders.data.filter((order) => { return order.status === \\\"ORDER_PLACED\\\" }).length}}\\n },\\n {\\n \\\"x\\\": \\\"OUT_FOR_DELIVERY\\\",\\n \\\"y\\\": {{getOrders.data.filter((order) => { return order.status === \\\"OUT_FOR_DELIVERY\\\" }).length}}\\n },\\n {\\n \\\"x\\\": \\\"PAYMENT_PENDING\\\",\\n \\\"y\\\": {{getOrders.data.filter((order) => { return order.status === \\\"PAYMENT_PENDING\\\" }).length}}\\n },\\n {\\n \\\"x\\\": \\\"REFUNDED\\\",\\n \\\"y\\\": {{getOrders.data.filter((order) => { return order.status === \\\"REFUNDED\\\" }).length}}\\n }\\n \\n]\"}]", "chartData": "[{\"seriesName\":\"Order Status\",\"data\":\"[\\n {\\n \\\"x\\\": \\\"ORDER_PLACED\\\",\\n \\\"y\\\": {{getOrders.data.filter((order) => { return order.status === \\\"ORDER_PLACED\\\" }).length}}\\n },\\n {\\n \\\"x\\\": \\\"OUT_FOR_DELIVERY\\\",\\n \\\"y\\\": {{getOrders.data.filter((order) => { return order.status === \\\"OUT_FOR_DELIVERY\\\" }).length}}\\n },\\n {\\n \\\"x\\\": \\\"PAYMENT_PENDING\\\",\\n \\\"y\\\": {{getOrders.data.filter((order) => { return order.status === \\\"PAYMENT_PENDING\\\" }).length}}\\n },\\n {\\n \\\"x\\\": \\\"REFUNDED\\\",\\n \\\"y\\\": {{getOrders.data.filter((order) => { return order.status === \\\"REFUNDED\\\" }).length}}\\n }\\n \\n]\"}]",
"xAxisName": "Last Week", "xAxisName": "Last Week",
"yAxisName": "Total Order Revenue $", "yAxisName": "Total Order Revenue $",

4
deploy/ansible/appsmith_playbook/roles/generate_template/templates/mongo-init.js.j2
View File

@ -635,8 +635,8 @@ let res = [
{ {
"id" : "13.1.4", "id" : "13.1.4",
"helpText" : "Enables scrolling inside the chart", "helpText" : "Enables scrolling inside the chart",
"propertyName" : "allowHorizontalScroll", "propertyName" : "allowScroll",
"label" : "Allow horizontal scroll", "label" : "Allow scroll",
"controlType" : "SWITCH" "controlType" : "SWITCH"
}, },
{ {

4
deploy/template/mongo-init.js.sh
View File

@ -642,8 +642,8 @@ let res = [
{ {
"id" : "13.1.4", "id" : "13.1.4",
"helpText" : "Enables scrolling inside the chart", "helpText" : "Enables scrolling inside the chart",
"propertyName" : "allowHorizontalScroll", "propertyName" : "allowScroll",
"label" : "Allow horizontal scroll", "label" : "Allow scroll",
"controlType" : "SWITCH" "controlType" : "SWITCH"
}, },
{ {