Skip to content

Commit f79f1d3

Browse files
VeraZabVeraZab
authored
Merge pull request #841 from plotly/metasrc-adj
Metasrc adj
2 parents f9a8a57 + 0d206e6 commit f79f1d3

File tree

5 files changed

+76
-37
lines changed

5 files changed

+76
-37
lines changed

‎package.json

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
{
22
"name": "react-chart-editor",
33
"description": "plotly.js chart editor react component UI",
4-
"version": "0.35.2",
4+
"version": "0.35.3",
55
"author": "Plotly, Inc.",
66
"bugs": {
77
"url": "https://github.com/plotly/react-chart-editor/issues"
@@ -15,7 +15,7 @@
1515
"fast-isnumeric": "^1.1.1",
1616
"immutability-helper": "^2.7.1",
1717
"plotly-icons": "1.2.3",
18-
"plotly.js": "1.44.2",
18+
"plotly.js": "1.44.3",
1919
"prop-types": "^15.5.10",
2020
"raf": "^3.4.0",
2121
"react-color": "^2.13.8",

‎scripts/translationKeys/combined-translation-keys.txt

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -245,9 +245,9 @@ Embed images in your figure to make the data more readable or to brand your cont
245245
Enable // react-chart-editor: /default_panels/StyleAxesPanel.js:67
246246
Enabled // react-chart-editor: /default_panels/GraphTransformsPanel.js:73
247247
End Point // react-chart-editor: /default_panels/StyleShapesPanel.js:33
248-
Enter LaTeX formatted text // react-chart-editor: /components/fields/TextEditor.js:36
248+
Enter LaTeX formatted text // react-chart-editor: /components/fields/TextEditor.js:71
249249
Enter Link URL // react-chart-editor: /components/widgets/text_editors/RichText/LinkEditor.js:89
250-
Enter html formatted text // react-chart-editor: /components/fields/TextEditor.js:41
250+
Enter html formatted text // react-chart-editor: /components/fields/TextEditor.js:84
251251
Equirectangular // react-chart-editor: /default_panels/GraphSubplotsPanel.js:115
252252
Error (+) // react-chart-editor: /components/fields/ErrorBars.js:146
253253
Error (-) // react-chart-editor: /components/fields/ErrorBars.js:147
@@ -257,6 +257,7 @@ Error Bars Z
257257
Error Type // react-chart-editor: /components/fields/ErrorBars.js:112
258258
Europe // react-chart-editor: /default_panels/GraphSubplotsPanel.js:102
259259
Every label // react-chart-editor: /default_panels/StyleAxesPanel.js:240
260+
Ex: 'My custom title %{meta[1]}.' // react-chart-editor: /default_panels/StyleLayoutPanel.js:178
260261
Exclude // react-chart-editor: /components/fields/FilterOperation.js:30
261262
Exclude Range // react-chart-editor: /components/fields/FilterOperation.js:79
262263
Exclude Values // react-chart-editor: /components/fields/FilterOperation.js:87
@@ -473,7 +474,6 @@ Note Text
473474
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
474475
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
475476
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
476-
Note: item count starts at 0. // react-chart-editor: /default_panels/StyleLayoutPanel.js:192
477477
November // react-chart-editor: /components/widgets/DateTimePicker.js:80
478478
Number format // react-chart-editor: /default_panels/StyleLayoutPanel.js:60
479479
Number of Contours // react-chart-editor: /default_panels/StyleTracesPanel.js:366

‎scripts/translationKeys/translation-keys.txt

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -242,9 +242,9 @@ Embed images in your figure to make the data more readable or to brand your cont
242242
Enable // /default_panels/StyleAxesPanel.js:67
243243
Enabled // /default_panels/GraphTransformsPanel.js:73
244244
End Point // /default_panels/StyleShapesPanel.js:33
245-
Enter LaTeX formatted text // /components/fields/TextEditor.js:36
245+
Enter LaTeX formatted text // /components/fields/TextEditor.js:71
246246
Enter Link URL // /components/widgets/text_editors/RichText/LinkEditor.js:89
247-
Enter html formatted text // /components/fields/TextEditor.js:41
247+
Enter html formatted text // /components/fields/TextEditor.js:84
248248
Equirectangular // /default_panels/GraphSubplotsPanel.js:115
249249
Error (+) // /components/fields/ErrorBars.js:146
250250
Error (-) // /components/fields/ErrorBars.js:147
@@ -254,6 +254,7 @@ Error Bars Z
254254
Error Type // /components/fields/ErrorBars.js:112
255255
Europe // /default_panels/GraphSubplotsPanel.js:102
256256
Every label // /default_panels/StyleAxesPanel.js:240
257+
Ex: 'My custom title %{meta[1]}.' // /default_panels/StyleLayoutPanel.js:178
257258
Exclude // /components/fields/FilterOperation.js:30
258259
Exclude Range // /components/fields/FilterOperation.js:79
259260
Exclude Values // /components/fields/FilterOperation.js:87
@@ -468,7 +469,6 @@ Note Text
468469
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
469470
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
470471
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
471-
Note: item count starts at 0. // /default_panels/StyleLayoutPanel.js:192
472472
November // /components/widgets/DateTimePicker.js:80
473473
Number format // /default_panels/StyleLayoutPanel.js:60
474474
Number of Contours // /default_panels/StyleTracesPanel.js:366

‎src/components/fields/TextEditor.js

Lines changed: 65 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -8,21 +8,56 @@ import RichText from '../widgets/text_editors/RichText';
88
import MultiFormat from '../widgets/text_editors/MultiFormat';
99
import HTML from '../widgets/text_editors/HTML';
1010

11+
// TODO: import plotly.js regex directly: https://github.com/plotly/plotly.js/issues/3520
12+
const TEMPLATE_STRING_REGEX = /%{([^\s%{}:]*)(:[^}]*)?}/g;
13+
const INDEX_IN_TEMPLATE_STRING_REGEX = /%{(meta(\[(\d+)]))}/;
14+
1115
export class UnconnectedTextEditor extends Component {
16+
hasTemplateStrings(value) {
17+
return value.match(TEMPLATE_STRING_REGEX);
18+
}
19+
20+
updatePlot(value) {
21+
const {updatePlot} = this.props;
22+
const templateStrings = this.hasTemplateStrings(value);
23+
24+
let adjustedValue = value;
25+
26+
if (templateStrings) {
27+
adjustedValue = adjustedValue.replace(TEMPLATE_STRING_REGEX, match => {
28+
const index = INDEX_IN_TEMPLATE_STRING_REGEX.exec(match);
29+
if (index) {
30+
const adjustedIndex = parseInt(index[3], 10) - 1;
31+
return `%{meta[${adjustedIndex}]}`;
32+
}
33+
return match;
34+
});
35+
}
36+
37+
updatePlot(adjustedValue);
38+
}
39+
40+
getAdjustedFullValue(fullValue) {
41+
const templateStrings = this.hasTemplateStrings(fullValue);
42+
if (templateStrings) {
43+
return fullValue.replace(TEMPLATE_STRING_REGEX, match => {
44+
const index = INDEX_IN_TEMPLATE_STRING_REGEX.exec(match);
45+
if (index) {
46+
const adjustedIndex = parseInt(index[3], 10) + 1;
47+
return `%{meta[${adjustedIndex}]}`;
48+
}
49+
return match;
50+
});
51+
}
52+
return fullValue;
53+
}
54+
1255
render() {
13-
const {
14-
attr,
15-
container,
16-
htmlOnly,
17-
latexOnly,
18-
multiValued,
19-
richTextOnly,
20-
updatePlot,
21-
} = this.props;
56+
const {attr, container, htmlOnly, latexOnly, multiValued, richTextOnly} = this.props;
2257

2358
const {localize: _} = this.context;
2459

25-
let fullValue = this.props.fullValue;
60+
let fullValue = this.getAdjustedFullValue(this.props.fullValue);
2661

2762
let placeholder;
2863
if (multiValued || (fullValue && (!container || !nestedProperty(container, attr)))) {
@@ -34,14 +69,30 @@ export class UnconnectedTextEditor extends Component {
3469

3570
if (latexOnly) {
3671
placeholder = _('Enter LaTeX formatted text');
37-
editor = <LaTeX value={fullValue} placeholder={placeholder} onChange={updatePlot} />;
72+
editor = (
73+
<LaTeX value={fullValue} placeholder={placeholder} onChange={this.updatePlot.bind(this)} />
74+
);
3875
} else if (richTextOnly) {
39-
editor = <RichText value={fullValue} placeholder={placeholder} onChange={updatePlot} />;
76+
editor = (
77+
<RichText
78+
value={fullValue}
79+
placeholder={placeholder}
80+
onChange={this.updatePlot.bind(this)}
81+
/>
82+
);
4083
} else if (htmlOnly) {
4184
placeholder = _('Enter html formatted text');
42-
editor = <HTML value={fullValue} placeholder={placeholder} onChange={updatePlot} />;
85+
editor = (
86+
<HTML value={fullValue} placeholder={placeholder} onChange={this.updatePlot.bind(this)} />
87+
);
4388
} else {
44-
editor = <MultiFormat value={fullValue} placeholder={placeholder} onChange={updatePlot} />;
89+
editor = (
90+
<MultiFormat
91+
value={fullValue}
92+
placeholder={placeholder}
93+
onChange={this.updatePlot.bind(this)}
94+
/>
95+
);
4596
}
4697

4798
return (

‎src/default_panels/StyleLayoutPanel.js

Lines changed: 3 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -174,22 +174,10 @@ const StyleLayoutPanel = (props, {localize: _}) => (
174174
{_(
175175
'You can refer to the items in this column in any text fields of the editor like so: '
176176
)}
177-
<div>
178-
<span
179-
style={{
180-
lineHeight: '20px',
181-
backgroundColor: '#eadef7',
182-
borderRadius: '2px',
183-
fontStyle: 'italic',
184-
letterSpacing: '1px',
185-
}}
186-
>
187-
{'%{meta[0]}'}
188-
</span>
189-
{' .'}
190-
</div>
177+
<p style={{letterSpacing: '1px', fontStyle: 'italic'}}>
178+
{_("Ex: 'My custom title %{meta[1]}.' ")}
179+
</p>
191180
</p>
192-
{_('Note: item count starts at 0.')}
193181
</Info>
194182
</PlotlyFold>
195183
</LayoutPanel>

0 commit comments

Comments
 (0)