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",
"chartType": "BAR_CHART",
"chartName": "Sales on working days",
"allowHorizontalScroll": false,
"allowScroll": false,
"version": 1,
"chartData": [
{

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

@ -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": []}
},

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

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

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

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

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

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

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

@ -23,7 +23,7 @@
{
"widgetName": "Chart1",
"rightColumn": 26,
"allowHorizontalScroll": false,
"allowScroll": false,
"widgetId": "ypstklohw5",
"topRow": 4,
"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() {
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)

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

@ -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",

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

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

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

@ -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,

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

@ -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": {

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 { 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<WidgetProps>) => {
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 = (
currentDSL: ContainerWidgetProps<WidgetProps>,
) => {
@ -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;
}

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

@ -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<ChartComponentProps> {
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<ChartComponentProps> {
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<ChartComponentProps> {
}
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());

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

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

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

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

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

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

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

@ -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 $",

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",
"helpText" : "Enables scrolling inside the chart",
"propertyName" : "allowHorizontalScroll",
"label" : "Allow horizontal scroll",
"propertyName" : "allowScroll",
"label" : "Allow scroll",
"controlType" : "SWITCH"
},
{

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

@ -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"
},
{