From 5965b0f55245cd008834cdcbe0de6f2ab88add82 Mon Sep 17 00:00:00 2001 From: Vera Zabeida Date: Thu, 7 Feb 2019 14:36:54 -0500 Subject: [PATCH 1/5] metasrc, start indexing at 1 not 0 --- src/components/fields/TextEditor.js | 79 ++++++++++++++++++++++++----- 1 file changed, 65 insertions(+), 14 deletions(-) diff --git a/src/components/fields/TextEditor.js b/src/components/fields/TextEditor.js index 1ec39ba0a..cb10bb398 100644 --- a/src/components/fields/TextEditor.js +++ b/src/components/fields/TextEditor.js @@ -8,21 +8,56 @@ import RichText from '../widgets/text_editors/RichText'; import MultiFormat from '../widgets/text_editors/MultiFormat'; import HTML from '../widgets/text_editors/HTML'; +// TODO: import plotly.js regex directly: https://github.com/plotly/plotly.js/issues/3520 +const TEMPLATE_STRING_REGEX = /%{([^\s%{}:]*)(:[^}]*)?}/g; +const INDEX_IN_TEMPLATE_STRING_REGEX = /%{(meta(\[(\d+)]))}/; + export class UnconnectedTextEditor extends Component { + hasTemplateStrings(value) { + return value.match(TEMPLATE_STRING_REGEX); + } + + updatePlot(value) { + const {updatePlot} = this.props; + const templateStrings = this.hasTemplateStrings(value); + + let adjustedValue = value; + + if (templateStrings) { + adjustedValue = adjustedValue.replace(TEMPLATE_STRING_REGEX, match => { + const index = INDEX_IN_TEMPLATE_STRING_REGEX.exec(match); + if (index) { + const adjustedIndex = parseInt(index[3], 10) - 1; + return `%{meta[${adjustedIndex}]}`; + } + return match; + }); + } + + updatePlot(adjustedValue); + } + + getAdjustedFullValue(fullValue) { + const templateStrings = this.hasTemplateStrings(fullValue); + if (templateStrings) { + return fullValue.replace(TEMPLATE_STRING_REGEX, match => { + const index = INDEX_IN_TEMPLATE_STRING_REGEX.exec(match); + if (index) { + const adjustedIndex = parseInt(index[3], 10) + 1; + return `%{meta[${adjustedIndex}]}`; + } + return match; + }); + } + return fullValue; + } + render() { - const { - attr, - container, - htmlOnly, - latexOnly, - multiValued, - richTextOnly, - updatePlot, - } = this.props; + const {attr, container, htmlOnly, latexOnly, multiValued, richTextOnly} = this.props; const {localize: _} = this.context; - let fullValue = this.props.fullValue; + let fullValue = this.getAdjustedFullValue(this.props.fullValue); let placeholder; if (multiValued || (fullValue && (!container || !nestedProperty(container, attr)))) { @@ -34,14 +69,30 @@ export class UnconnectedTextEditor extends Component { if (latexOnly) { placeholder = _('Enter LaTeX formatted text'); - editor = ; + editor = ( + + ); } else if (richTextOnly) { - editor = ; + editor = ( + + ); } else if (htmlOnly) { placeholder = _('Enter html formatted text'); - editor = ; + editor = ( + + ); } else { - editor = ; + editor = ( + + ); } return ( From 395e8599952d9302b453f00701f1b8c176bd7477 Mon Sep 17 00:00:00 2001 From: Vera Zabeida Date: Thu, 7 Feb 2019 14:44:03 -0500 Subject: [PATCH 2/5] Adjust info box --- src/default_panels/StyleLayoutPanel.js | 18 +++--------------- 1 file changed, 3 insertions(+), 15 deletions(-) diff --git a/src/default_panels/StyleLayoutPanel.js b/src/default_panels/StyleLayoutPanel.js index 0f4283027..3fbec265e 100644 --- a/src/default_panels/StyleLayoutPanel.js +++ b/src/default_panels/StyleLayoutPanel.js @@ -174,22 +174,10 @@ const StyleLayoutPanel = (props, {localize: _}) => ( {_( 'You can refer to the items in this column in any text fields of the editor like so: ' )} -
- - {'%{meta[0]}'} - - {' .'} -
+

+ {_("Ex: 'My custom title %{meta[1]}.' ")} +

- {_('Note: item count starts at 0.')} From 1c597faf174e980d91d3a7ed03f1a078e8a5b0e9 Mon Sep 17 00:00:00 2001 From: Vera Zabeida Date: Thu, 7 Feb 2019 14:45:16 -0500 Subject: [PATCH 3/5] update plotly.js --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 469c120b1..52016d3e3 100644 --- a/package.json +++ b/package.json @@ -15,7 +15,7 @@ "fast-isnumeric": "^1.1.1", "immutability-helper": "^2.7.1", "plotly-icons": "1.2.3", - "plotly.js": "1.44.2", + "plotly.js": "1.44.3", "prop-types": "^15.5.10", "raf": "^3.4.0", "react-color": "^2.13.8", From 5e9c3c49356da58803daaa10d8b32b4da896ed70 Mon Sep 17 00:00:00 2001 From: Vera Zabeida Date: Thu, 7 Feb 2019 15:02:14 -0500 Subject: [PATCH 4/5] v0.35.3 --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 52016d3e3..82261405b 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "react-chart-editor", "description": "plotly.js chart editor react component UI", - "version": "0.35.2", + "version": "0.35.3", "author": "Plotly, Inc.", "bugs": { "url": "https://github.com/plotly/react-chart-editor/issues" From 0d206e6ea8621d860086c751d68ab80823960838 Mon Sep 17 00:00:00 2001 From: Vera Zabeida Date: Thu, 7 Feb 2019 15:06:20 -0500 Subject: [PATCH 5/5] translation keys --- scripts/translationKeys/combined-translation-keys.txt | 6 +++--- scripts/translationKeys/translation-keys.txt | 6 +++--- 2 files changed, 6 insertions(+), 6 deletions(-) diff --git a/scripts/translationKeys/combined-translation-keys.txt b/scripts/translationKeys/combined-translation-keys.txt index e827f631b..2a61de6d8 100644 --- a/scripts/translationKeys/combined-translation-keys.txt +++ b/scripts/translationKeys/combined-translation-keys.txt @@ -245,9 +245,9 @@ Embed images in your figure to make the data more readable or to brand your cont Enable // react-chart-editor: /default_panels/StyleAxesPanel.js:67 Enabled // react-chart-editor: /default_panels/GraphTransformsPanel.js:73 End Point // react-chart-editor: /default_panels/StyleShapesPanel.js:33 -Enter LaTeX formatted text // react-chart-editor: /components/fields/TextEditor.js:36 +Enter LaTeX formatted text // react-chart-editor: /components/fields/TextEditor.js:71 Enter Link URL // react-chart-editor: /components/widgets/text_editors/RichText/LinkEditor.js:89 -Enter html formatted text // react-chart-editor: /components/fields/TextEditor.js:41 +Enter html formatted text // react-chart-editor: /components/fields/TextEditor.js:84 Equirectangular // react-chart-editor: /default_panels/GraphSubplotsPanel.js:115 Error (+) // react-chart-editor: /components/fields/ErrorBars.js:146 Error (-) // react-chart-editor: /components/fields/ErrorBars.js:147 @@ -257,6 +257,7 @@ Error Bars Z Error Type // react-chart-editor: /components/fields/ErrorBars.js:112 Europe // react-chart-editor: /default_panels/GraphSubplotsPanel.js:102 Every label // react-chart-editor: /default_panels/StyleAxesPanel.js:240 +Ex: 'My custom title %{meta[1]}.' // react-chart-editor: /default_panels/StyleLayoutPanel.js:178 Exclude // react-chart-editor: /components/fields/FilterOperation.js:30 Exclude Range // react-chart-editor: /components/fields/FilterOperation.js:79 Exclude Values // react-chart-editor: /components/fields/FilterOperation.js:87 @@ -473,7 +474,6 @@ Note Text Note: X and Y Values are used for binning. If Z values are provided, they are used as inputs to the histogram function which you can configure in the // react-chart-editor: /default_panels/GraphCreatePanel.js:85 Note: in horizontal orientation, Y values are used for binning. If X values are provided, they are used as inputs to the histogram function which you can configure in the // react-chart-editor: /default_panels/GraphCreatePanel.js:76 Note: in vertical orientation, X values are used for binning. If Y values are provided, they are used as inputs to the histogram function which you can configure in the // react-chart-editor: /default_panels/GraphCreatePanel.js:67 -Note: item count starts at 0. // react-chart-editor: /default_panels/StyleLayoutPanel.js:192 November // react-chart-editor: /components/widgets/DateTimePicker.js:80 Number format // react-chart-editor: /default_panels/StyleLayoutPanel.js:60 Number of Contours // react-chart-editor: /default_panels/StyleTracesPanel.js:366 diff --git a/scripts/translationKeys/translation-keys.txt b/scripts/translationKeys/translation-keys.txt index bdc1fa5a6..20d547a4a 100644 --- a/scripts/translationKeys/translation-keys.txt +++ b/scripts/translationKeys/translation-keys.txt @@ -242,9 +242,9 @@ Embed images in your figure to make the data more readable or to brand your cont Enable // /default_panels/StyleAxesPanel.js:67 Enabled // /default_panels/GraphTransformsPanel.js:73 End Point // /default_panels/StyleShapesPanel.js:33 -Enter LaTeX formatted text // /components/fields/TextEditor.js:36 +Enter LaTeX formatted text // /components/fields/TextEditor.js:71 Enter Link URL // /components/widgets/text_editors/RichText/LinkEditor.js:89 -Enter html formatted text // /components/fields/TextEditor.js:41 +Enter html formatted text // /components/fields/TextEditor.js:84 Equirectangular // /default_panels/GraphSubplotsPanel.js:115 Error (+) // /components/fields/ErrorBars.js:146 Error (-) // /components/fields/ErrorBars.js:147 @@ -254,6 +254,7 @@ Error Bars Z Error Type // /components/fields/ErrorBars.js:112 Europe // /default_panels/GraphSubplotsPanel.js:102 Every label // /default_panels/StyleAxesPanel.js:240 +Ex: 'My custom title %{meta[1]}.' // /default_panels/StyleLayoutPanel.js:178 Exclude // /components/fields/FilterOperation.js:30 Exclude Range // /components/fields/FilterOperation.js:79 Exclude Values // /components/fields/FilterOperation.js:87 @@ -468,7 +469,6 @@ Note Text Note: X and Y Values are used for binning. If Z values are provided, they are used as inputs to the histogram function which you can configure in the // /default_panels/GraphCreatePanel.js:85 Note: in horizontal orientation, Y values are used for binning. If X values are provided, they are used as inputs to the histogram function which you can configure in the // /default_panels/GraphCreatePanel.js:76 Note: in vertical orientation, X values are used for binning. If Y values are provided, they are used as inputs to the histogram function which you can configure in the // /default_panels/GraphCreatePanel.js:67 -Note: item count starts at 0. // /default_panels/StyleLayoutPanel.js:192 November // /components/widgets/DateTimePicker.js:80 Number format // /default_panels/StyleLayoutPanel.js:60 Number of Contours // /default_panels/StyleTracesPanel.js:366