Merge alive-dev into main: chartHeight control, Format migration & block editor fixes

packages/commons/src/Blocks.jsx

@@ -10,7 +10,7 @@ import {
     __experimentalText as Text,
     __experimentalScrollable as Scrollable
 } from '@wordpress/components';
-import { Component } from '@wordpress/element';
+import { Component, createRef } from '@wordpress/element';
 import apiFetch from '@wordpress/api-fetch';
 import { togglePanel } from "./Util";
 
@@ -50,7 +50,7 @@ export class ComponentWithSettings extends Component {
                 }
             }
         }, false);
-        this.iframe = React.createRef();
+        this.iframe = createRef();
         this.unsubscribe = wp.data.subscribe(() => {
             const newPreviewMode = wp.data.select("core/editor").getDeviceType();
             if (newPreviewMode !== this.state.previewMode) {

packages/commons/src/Format.jsx

@@ -341,7 +341,8 @@ export const Format = ({
                            onUseCustomAxisFormatChange,
                            customFormat,
                            hiddenCustomAxisFormat,
-                           useCustomAxisFormat
+                           useCustomAxisFormat,
+                           showPrefixSuffix = false
                        }) => {
 
 
@@ -398,24 +399,24 @@ export const Format = ({
                     value={format.minimumFractionDigits}
                 />
             </PanelRow>
-            <PanelRow>
+            {showPrefixSuffix && <PanelRow>
                 <TextControl
                     label={__("Prefix", "dg")}
                     onChange={(value) => {
                         onFormatChange(Object.assign({}, format, { prefix: value }), 'format')
                     }}
                     value={format.prefix}
                 />
-            </PanelRow>
-            <PanelRow>
+            </PanelRow>}
+            {showPrefixSuffix && <PanelRow>
                 <TextControl
                     label={__("Suffix", "dg")}
                     onChange={(value) => {
                         onFormatChange(Object.assign({}, format, { suffix: value }), 'format')
                     }}
                     value={format.suffix}
                 />
-            </PanelRow>
+            </PanelRow>}
         </PanelBody>, <>
             {!hiddenCustomAxisFormat && <PanelRow>
                 <ToggleControl label={__("Use Custom Axis Format", "dg")} checked={useCustomAxisFormat}

plugins/wp-react-blocks-plugin/blocks/big-number-trend/BlockEdit.js

@@ -18,7 +18,7 @@ import { togglePanel } from '@devgateway/dvz-wp-commons';
 import { Measures } from '@devgateway/dvz-wp-commons';
 import { DataFilters } from '@devgateway/dvz-wp-commons';
 import { isSupersetAPI } from '@devgateway/dvz-wp-commons';
-import Format from "../charts/Format.jsx";
+import { Format } from '@devgateway/dvz-wp-commons';
 
 
 class BlockEdit extends BlockEditWithAPIMetadata {
@@ -63,7 +63,8 @@ class BlockEdit extends BlockEditWithAPIMetadata {
                 noDataText,
                 showTooltip,
                 tooltipText,
-                tooltipStyle
+                tooltipStyle,
+                percentChangeFormat
             }
         } = this.props;
 
@@ -265,7 +266,7 @@ class BlockEdit extends BlockEditWithAPIMetadata {
                             <MediaUpload
                                 onSelect={(media) => setAttributes({ iconUp: media.url })}
                                 allowedTypes={["image"]}
-                                value={iconImage}
+                                value={iconUp}
                                 render={({ open }) => (
                                     <button onClick={open} className="components-button is-secondary">
                                         {iconImage
@@ -295,7 +296,7 @@ class BlockEdit extends BlockEditWithAPIMetadata {
                             <MediaUpload
                                 onSelect={(media) => setAttributes({ iconDown: media.url })}
                                 allowedTypes={["image"]}
-                                value={iconImage}
+                                value={iconDown}
                                 render={({ open }) => (
                                     <button onClick={open} className="components-button is-secondary">
                                         {iconImage
@@ -431,6 +432,20 @@ class BlockEdit extends BlockEditWithAPIMetadata {
                                 }
                             ]}
                         />
+                        <PanelBody
+                            initialOpen={false}
+                            title={__("Percentage Change Format")}
+                        >
+                            <Format
+                                hiddenCustomAxisFormat={true}
+                                showPrefixSuffix={true}
+                                format={percentChangeFormat}
+                                customFormat={{}}
+                                useCustomAxisFormat={false}
+                                onFormatChange={(newFormat) => setAttributes({ percentChangeFormat: newFormat })}
+                                onUseCustomAxisFormatChange={() => {}}
+                            />
+                        </PanelBody>
                         <PanelBody
                             initialOpen={false}
                             panelStatus={panelStatus['TOOLTIP']}

plugins/wp-react-blocks-plugin/blocks/big-number-trend/BlockSave.js

@@ -11,7 +11,6 @@ const SaveComponent = (props) => {
             format,
             filters,
             group,
-            noDataMsg,
             dvzProxyDatasetId,
             bigNumberFontSize,
             labelFontSize,
@@ -30,20 +29,18 @@ const SaveComponent = (props) => {
             backGroundColor,
             showTooltip,
             tooltipText,
-            tooltipStyle
+            tooltipStyle,
+            percentChangeFormat
         }
     } = props;
     const blockProps = useBlockProps.save({
         className: 'big-number-trend'
     });
 
-    const levels = [dimension1]
-    const source = levels.filter(l => l != 'none' && l != null).join('/')
     return (
         <div {...blockProps} className={"viz-component"}
              data-component={"bignumbertrend"}
              data-height={height}
-             data-source={source}
              data-app={app}
              data-csv={csv}
              data-dvz-proxy-dataset-id={dvzProxyDatasetId}
@@ -52,11 +49,13 @@ const SaveComponent = (props) => {
              data-format={encodeURIComponent(JSON.stringify(format))}
              data-group={group}
              data-filters={encodeURIComponent(JSON.stringify(filters))}
-             data-no-data-message={noDataMsg}
              data-big-number-font-size={bigNumberFontSize}
              data-label-font-size={labelFontSize}
              data-percent-font-size={percentFontSize}
              data-text-color={encodeURIComponent(textColor)}
+             data-number-color={encodeURIComponent(numberColor)}
+             data-percent-color={encodeURIComponent(percentColor)}
+             data-back-ground-color={backGroundColor}
              data-label={label}
              data-show-percentage-change={showPercentageChange}
              data-wait-for-filters={waitForFilters}
@@ -65,12 +64,10 @@ const SaveComponent = (props) => {
              data-icon-up={iconUp}
              data-icon-down={iconDown}
              data-style-option={styleOption}
-             data-percent-color={percentColor}
-             data-number-color={numberColor}
-             data-back-ground-color={backGroundColor}
-            data-show-tooltip={showTooltip}
-            data-tooltip-text={tooltipText}
-            data-tooltip-style={tooltipStyle}
+             data-show-tooltip={showTooltip}
+             data-tooltip-text={tooltipText}
+             data-tooltip-style={tooltipStyle}
+             data-percent-change-format={encodeURIComponent(JSON.stringify(percentChangeFormat))}
         >
             <InnerBlocks.Content/>
         </div>

plugins/wp-react-blocks-plugin/blocks/big-number-trend/index.js

@@ -146,6 +146,14 @@ registerBlockType(BLOCKS_NS + '/bignumbertrend',
             iconUp: {
                 type: "string",
                 default: ""
+            },
+            percentChangeFormat: {
+                type: 'Object',
+                default: {
+                    "style": "percent",
+                    "minimumFractionDigits": 2,
+                    "maximumFractionDigits": 2
+                }
             }
         },
         edit: BlockEdit,

plugins/wp-react-blocks-plugin/blocks/big-number/BlockEdit.js

@@ -18,7 +18,7 @@ import { togglePanel } from '@devgateway/dvz-wp-commons';;
 import { Measures } from '@devgateway/dvz-wp-commons';
 import { DataFilters } from '@devgateway/dvz-wp-commons';
 import { isSupersetAPI } from '@devgateway/dvz-wp-commons';
-import Format from "../charts/Format.jsx";
+import { Format } from '@devgateway/dvz-wp-commons';
 
 
 class BlockEdit extends BlockEditWithAPIMetadata {

plugins/wp-react-blocks-plugin/blocks/charts/BlockEdit.js

@@ -4,6 +4,7 @@ import {
     Panel,
     PanelBody,
     PanelRow,
+    RangeControl,
     ResizableBox,
     SelectControl,
     TextareaControl,
@@ -74,6 +75,7 @@ class BlockEdit extends BlockEditWithAPIMetadata {
             attributes: {
                 measures,
                 height,
+                chartHeight,
                 type,
                 groupMode,
                 bottomLegend,
@@ -251,6 +253,18 @@ class BlockEdit extends BlockEditWithAPIMetadata {
                         </PanelBody>
                         <SizeConfig setAttributes={setAttributes} panelStatus={this.props.attributes.panelStatus}
                                     height={height}></SizeConfig>
+                        <PanelBody initialOpen={false} title={__("Chart Area Height")}>
+                            <PanelRow>
+                                <RangeControl
+                                    label={__("Chart height (0 = auto: chart fills the box and the legend shares it, legacy behavior). When > 0 the chart uses this height and the legend flows above/below it.")}
+                                    value={chartHeight}
+                                    min={0}
+                                    max={2000}
+                                    step={10}
+                                    onChange={(chartHeight) => setAttributes({ chartHeight: chartHeight ?? 0 })}
+                                />
+                            </PanelRow>
+                        </PanelBody>
                         {/*
                         <PanelBody initialOpen={false} title={__("Info Graphic")}>
                             <PanelRow>

plugins/wp-react-blocks-plugin/blocks/charts/BlockSave.js

@@ -4,6 +4,7 @@ const SaveComponent = (props) => {
     const {
         toggleSelection, setAttributes, attributes: {
             height,
+            chartHeight,
             width,
             type,
             groupMode,
@@ -141,6 +142,7 @@ const SaveComponent = (props) => {
         <div {...blockProps} className={"viz-component"}
              data-component={"chart"}
              data-height={height}
+             data-chart-height={chartHeight}
              data-type={type}
              data-source={source}
              data-dvz-proxy-dataset-id={dvzProxyDatasetId}