diff --git a/app/client/cypress/fixtures/ChartDsl.json b/app/client/cypress/fixtures/ChartDsl.json index 34379e7b0f..18c85349c8 100644 --- a/app/client/cypress/fixtures/ChartDsl.json +++ b/app/client/cypress/fixtures/ChartDsl.json @@ -24,7 +24,7 @@ "widgetName": "Chart1", "chartType": "BAR_CHART", "chartName": "Sales on working days", - "allowHorizontalScroll": false, + "allowScroll": false, "version": 1, "chartData": [ { diff --git a/app/client/cypress/fixtures/ChartTextDsl.json b/app/client/cypress/fixtures/ChartTextDsl.json index ccaf55ba21..9da05d2949 100644 --- a/app/client/cypress/fixtures/ChartTextDsl.json +++ b/app/client/cypress/fixtures/ChartTextDsl.json @@ -57,7 +57,7 @@ "widgetName": "Chart1", "chartType": "LINE_CHART", "chartName": "Sales on working days", - "allowHorizontalScroll": false, + "allowScroll": false, "chartData": { "some-random-id": {"seriesName":"Sales","data": []} }, diff --git a/app/client/cypress/fixtures/chartUpdatedDsl.json b/app/client/cypress/fixtures/chartUpdatedDsl.json index 20a57d6a5c..2573bb11e6 100644 --- a/app/client/cypress/fixtures/chartUpdatedDsl.json +++ b/app/client/cypress/fixtures/chartUpdatedDsl.json @@ -107,7 +107,7 @@ "widgetName": "Chart1", "chartType": "LINE_CHART", "chartName": "Last week's revenue", - "allowHorizontalScroll": false, + "allowScroll": false, "version": 1, "chartData": { "q4pm3w97mo": { diff --git a/app/client/cypress/fixtures/displayWidgetDsl.json b/app/client/cypress/fixtures/displayWidgetDsl.json index e2fbfa257b..867673df0b 100644 --- a/app/client/cypress/fixtures/displayWidgetDsl.json +++ b/app/client/cypress/fixtures/displayWidgetDsl.json @@ -114,7 +114,7 @@ "widgetName": "Chart1", "chartType": "LINE_CHART", "chartName": "Sales on working days", - "allowHorizontalScroll": false, + "allowScroll": false, "chartData": [ { "seriesName": "Sales", diff --git a/app/client/cypress/fixtures/viewdsl.json b/app/client/cypress/fixtures/viewdsl.json index 3088ee5ac2..0d1428446d 100644 --- a/app/client/cypress/fixtures/viewdsl.json +++ b/app/client/cypress/fixtures/viewdsl.json @@ -147,7 +147,7 @@ "widgetName": "Chart1", "chartType": "BAR_CHART", "chartName": "App Sign Up", - "allowHorizontalScroll": false, + "allowScroll": false, "chartData": [ { "seriesName": "Sales", diff --git a/app/client/cypress/fixtures/widgetSelection.json b/app/client/cypress/fixtures/widgetSelection.json index 2347e0629b..be88d3e195 100644 --- a/app/client/cypress/fixtures/widgetSelection.json +++ b/app/client/cypress/fixtures/widgetSelection.json @@ -23,7 +23,7 @@ { "widgetName": "Chart1", "rightColumn": 26, - "allowHorizontalScroll": false, + "allowScroll": false, "widgetId": "ypstklohw5", "topRow": 4, "bottomRow": 36, diff --git a/app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/DisplayWidgets/Chart_spec.js b/app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/DisplayWidgets/Chart_spec.js index db78774e5e..797a0fc37c 100644 --- a/app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/DisplayWidgets/Chart_spec.js +++ b/app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/DisplayWidgets/Chart_spec.js @@ -292,13 +292,13 @@ describe("Chart Widget Functionality", function() { }); it("Chart Widget Functionality To Uncheck Horizontal Scroll Visible", function() { - cy.togglebarDisable(commonlocators.horizontalScroll); + cy.togglebarDisable(commonlocators.allowScroll); cy.PublishtheApp(); cy.get(publish.horizontalTab).should("not.exist"); }); it("Chart Widget Functionality To Check Horizontal Scroll Visible", function() { - cy.togglebar(commonlocators.horizontalScroll); + cy.togglebar(commonlocators.allowScroll); cy.PublishtheApp(); cy.get(publish.horizontalTab) .eq(1) diff --git a/app/client/cypress/locators/commonlocators.json b/app/client/cypress/locators/commonlocators.json index 0a65f5a7ac..82e833104d 100644 --- a/app/client/cypress/locators/commonlocators.json +++ b/app/client/cypress/locators/commonlocators.json @@ -40,7 +40,7 @@ "TableRow": ".t--draggable-tablewidget .tbody", "Disablejs": ".t--property-control-disabled", "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", "pdfSupport": ".t--property-control-pdfexport input", "ExcelSupport": ".t--property-control-excelexport input", diff --git a/app/client/src/comments/dsl.json b/app/client/src/comments/dsl.json index 7bfa9a09aa..93fda3c394 100644 --- a/app/client/src/comments/dsl.json +++ b/app/client/src/comments/dsl.json @@ -68,7 +68,7 @@ "widgetName":"Chart1", "chartType":"LINE_CHART", "chartName":"Sales on working days", - "allowHorizontalScroll":false, + "allowScroll":false, "version":1, "chartData":[ { diff --git a/app/client/src/constants/WidgetConstants.tsx b/app/client/src/constants/WidgetConstants.tsx index 9ba1327e92..e3094d5b85 100644 --- a/app/client/src/constants/WidgetConstants.tsx +++ b/app/client/src/constants/WidgetConstants.tsx @@ -69,7 +69,7 @@ export const layoutConfigurations: LayoutConfigurations = { FLUID: { minWidth: -1, maxWidth: -1 }, }; -export const LATEST_PAGE_VERSION = 43; +export const LATEST_PAGE_VERSION = 44; export const GridDefaults = { DEFAULT_CELL_SIZE: 1, diff --git a/app/client/src/entities/Widget/utils.test.ts b/app/client/src/entities/Widget/utils.test.ts index 4df1c68f13..a878a4819b 100644 --- a/app/client/src/entities/Widget/utils.test.ts +++ b/app/client/src/entities/Widget/utils.test.ts @@ -223,7 +223,7 @@ describe("getAllPathsFromPropertyConfig", () => { widgetName: "Chart1", chartType: "LINE_CHART", chartName: "Sales on working days", - allowHorizontalScroll: false, + allowScroll: false, version: 1, chartData: { "random-id": { diff --git a/app/client/src/utils/DSLMigrations.ts b/app/client/src/utils/DSLMigrations.ts index 7819ad111f..7a68e2feea 100644 --- a/app/client/src/utils/DSLMigrations.ts +++ b/app/client/src/utils/DSLMigrations.ts @@ -39,6 +39,7 @@ import { ButtonStyleTypes, ButtonVariantTypes } from "../components/constants"; import { Colors } from "../constants/Colors"; import { migrateResizableModalWidgetProperties } from "./migrations/ModalWidget"; import { migrateMapWidgetIsClickedMarkerCentered } from "./migrations/MapWidget"; +import { DSLWidget } from "widgets/constants"; /** * adds logBlackList key for all list widget children @@ -292,6 +293,24 @@ const mapDataMigration = (currentDSL: ContainerWidgetProps) => { return currentDSL; }; +const mapAllowHorizontalScrollMigration = ( + currentDSL: ContainerWidgetProps, +) => { + 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 = ( currentDSL: ContainerWidgetProps, ) => { @@ -949,6 +968,11 @@ export const transformDSL = ( if (currentDSL.version === 42) { currentDSL = migrateMapWidgetIsClickedMarkerCentered(currentDSL); + currentDSL.version = 43; + } + + if (currentDSL.version === 43) { + currentDSL = mapAllowHorizontalScrollMigration(currentDSL); currentDSL.version = LATEST_PAGE_VERSION; } diff --git a/app/client/src/widgets/ChartWidget/component/index.tsx b/app/client/src/widgets/ChartWidget/component/index.tsx index 450a702e92..c60652bcdf 100644 --- a/app/client/src/widgets/ChartWidget/component/index.tsx +++ b/app/client/src/widgets/ChartWidget/component/index.tsx @@ -44,7 +44,7 @@ FusionCharts.options.license({ }); export interface ChartComponentProps { - allowHorizontalScroll: boolean; + allowScroll: boolean; chartData: AllChartData; chartName: string; chartType: ChartType; @@ -81,38 +81,26 @@ class ChartComponent extends React.Component { chartContainerId = this.props.widgetId + "chart-container"; getChartType = () => { - const { allowHorizontalScroll, chartData, chartType } = this.props; + const { allowScroll, chartData, chartType } = this.props; const dataLength = Object.keys(chartData).length; const isMSChart = dataLength > 1; switch (chartType) { case "PIE_CHART": return "pie2d"; case "LINE_CHART": - return allowHorizontalScroll - ? "scrollline2d" - : isMSChart - ? "msline" - : "line"; + return allowScroll ? "scrollline2d" : isMSChart ? "msline" : "line"; case "BAR_CHART": - return allowHorizontalScroll - ? "scrollBar2D" - : isMSChart - ? "msbar2d" - : "bar2d"; + return allowScroll ? "scrollBar2D" : isMSChart ? "msbar2d" : "bar2d"; + case "AREA_CHART": + return allowScroll ? "scrollarea2d" : isMSChart ? "msarea" : "area2d"; case "COLUMN_CHART": - return allowHorizontalScroll + return allowScroll ? "scrollColumn2D" : isMSChart ? "mscolumn2d" : "column2d"; - case "AREA_CHART": - return allowHorizontalScroll - ? "scrollarea2d" - : isMSChart - ? "msarea" - : "area2d"; default: - return allowHorizontalScroll ? "scrollColumn2D" : "mscolumn2d"; + return allowScroll ? "scrollColumn2D" : "mscolumn2d"; } }; @@ -396,7 +384,7 @@ class ChartComponent extends React.Component { return; } const dataSource = - this.props.allowHorizontalScroll && this.props.chartType !== "PIE_CHART" + this.props.allowScroll && this.props.chartType !== "PIE_CHART" ? this.getScrollChartDataSource() : this.getChartDataSource(); @@ -470,10 +458,7 @@ class ChartComponent extends React.Component { } const chartType = this.getChartType(); this.chartInstance.chartType(chartType); - if ( - this.props.allowHorizontalScroll && - this.props.chartType !== "PIE_CHART" - ) { + if (this.props.allowScroll && this.props.chartType !== "PIE_CHART") { this.chartInstance.setChartData(this.getScrollChartDataSource()); } else { this.chartInstance.setChartData(this.getChartDataSource()); diff --git a/app/client/src/widgets/ChartWidget/index.ts b/app/client/src/widgets/ChartWidget/index.ts index eecf21a660..a4764bebc6 100644 --- a/app/client/src/widgets/ChartWidget/index.ts +++ b/app/client/src/widgets/ChartWidget/index.ts @@ -15,7 +15,7 @@ export const CONFIG = { widgetName: "Chart", chartType: "COLUMN_CHART", chartName: "Sales Report", - allowHorizontalScroll: false, + allowScroll: false, version: 1, chartData: { [generateReactKey()]: { diff --git a/app/client/src/widgets/ChartWidget/widget/index.tsx b/app/client/src/widgets/ChartWidget/widget/index.tsx index b3499bb10b..53369f3b2f 100644 --- a/app/client/src/widgets/ChartWidget/widget/index.tsx +++ b/app/client/src/widgets/ChartWidget/widget/index.tsx @@ -52,7 +52,7 @@ class ChartWidget extends BaseWidget { return ( }> ; diff --git a/app/client/src/widgets/ChartWidget/widget/propertyConfig.ts b/app/client/src/widgets/ChartWidget/widget/propertyConfig.ts index 8e10e89904..f04d1f5819 100644 --- a/app/client/src/widgets/ChartWidget/widget/propertyConfig.ts +++ b/app/client/src/widgets/ChartWidget/widget/propertyConfig.ts @@ -216,12 +216,13 @@ export default [ }, { helpText: "Enables scrolling inside the chart", - propertyName: "allowHorizontalScroll", - label: "Allow horizontal scroll", + propertyName: "allowScroll", + label: "Allow scroll", controlType: "SWITCH", isBindProperty: 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"], }, ], diff --git a/app/client/test/factories/Widgets/ChartFactory.ts b/app/client/test/factories/Widgets/ChartFactory.ts index 2535d90d29..ffe0ce2e8d 100644 --- a/app/client/test/factories/Widgets/ChartFactory.ts +++ b/app/client/test/factories/Widgets/ChartFactory.ts @@ -6,7 +6,7 @@ export const ChartFactory = Factory.Sync.makeFactory({ isVisible: true, chartType: "LINE_CHART", chartName: "Sales on working days", - allowHorizontalScroll: false, + allowScroll: false, chartData: [ { seriesName: "Sales", diff --git a/app/server/appsmith-server/src/main/resources/examples-organization.json b/app/server/appsmith-server/src/main/resources/examples-organization.json index 554056914c..aef74b6b2e 100644 --- a/app/server/appsmith-server/src/main/resources/examples-organization.json +++ b/app/server/appsmith-server/src/main/resources/examples-organization.json @@ -164,7 +164,7 @@ { "widgetName": "Chart1", "rightColumn": 8, - "allowHorizontalScroll": false, + "allowScroll": false, "widgetId": "n536wy81vu", "topRow": 3, "bottomRow": 14, @@ -324,7 +324,7 @@ { "widgetName": "Chart1", "rightColumn": 8, - "allowHorizontalScroll": false, + "allowScroll": false, "widgetId": "n536wy81vu", "topRow": 3, "bottomRow": 14, @@ -537,7 +537,7 @@ { "widgetName": "Chart1", "rightColumn": 8, - "allowHorizontalScroll": false, + "allowScroll": false, "widgetId": "ul3c5oquih", "topRow": 4, "bottomRow": 14, @@ -801,7 +801,7 @@ { "widgetName": "Chart1", "rightColumn": 8, - "allowHorizontalScroll": false, + "allowScroll": false, "widgetId": "ul3c5oquih", "topRow": 4, "bottomRow": 14, @@ -2856,7 +2856,7 @@ "widgetName": "Chart1", "chartType": "PIE_CHART", "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]\"}]", "xAxisName": "Last Week", "yAxisName": "Total Order Revenue $", @@ -4277,7 +4277,7 @@ "widgetName": "Chart1", "chartType": "PIE_CHART", "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]\"}]", "xAxisName": "Last Week", "yAxisName": "Total Order Revenue $", diff --git a/deploy/ansible/appsmith_playbook/roles/generate_template/templates/mongo-init.js.j2 b/deploy/ansible/appsmith_playbook/roles/generate_template/templates/mongo-init.js.j2 index 0d56ab1230..a2a364e6e6 100644 --- a/deploy/ansible/appsmith_playbook/roles/generate_template/templates/mongo-init.js.j2 +++ b/deploy/ansible/appsmith_playbook/roles/generate_template/templates/mongo-init.js.j2 @@ -635,8 +635,8 @@ let res = [ { "id" : "13.1.4", "helpText" : "Enables scrolling inside the chart", - "propertyName" : "allowHorizontalScroll", - "label" : "Allow horizontal scroll", + "propertyName" : "allowScroll", + "label" : "Allow scroll", "controlType" : "SWITCH" }, { diff --git a/deploy/template/mongo-init.js.sh b/deploy/template/mongo-init.js.sh index 0b26c98456..9f33feaa49 100644 --- a/deploy/template/mongo-init.js.sh +++ b/deploy/template/mongo-init.js.sh @@ -642,8 +642,8 @@ let res = [ { "id" : "13.1.4", "helpText" : "Enables scrolling inside the chart", - "propertyName" : "allowHorizontalScroll", - "label" : "Allow horizontal scroll", + "propertyName" : "allowScroll", + "label" : "Allow scroll", "controlType" : "SWITCH" }, {