Skip to content

Metasrc adj #841

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 5 commits into from
Feb 7, 2019
Merged

Metasrc adj #841

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
5965b0f
metasrc, start indexing at 1 not 0
VeraZab Feb 7, 2019
395e859
Adjust info box
VeraZab Feb 7, 2019
1c597fa
update plotly.js
VeraZab Feb 7, 2019
5e9c3c4
v0.35.3
VeraZab Feb 7, 2019
0d206e6
translation keys
VeraZab Feb 7, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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"
Expand All @@ -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",
Expand Down
6 changes: 3 additions & 3 deletions scripts/translationKeys/combined-translation-keys.txt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -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
Expand Down Expand Up @@ -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
Expand Down
6 changes: 3 additions & 3 deletions scripts/translationKeys/translation-keys.txt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -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
Expand Down Expand Up @@ -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
Expand Down
79 changes: 65 additions & 14 deletions src/components/fields/TextEditor.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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)))) {
Expand All @@ -34,14 +69,30 @@ export class UnconnectedTextEditor extends Component {

if (latexOnly) {
placeholder = _('Enter LaTeX formatted text');
editor = <LaTeX value={fullValue} placeholder={placeholder} onChange={updatePlot} />;
editor = (
<LaTeX value={fullValue} placeholder={placeholder} onChange={this.updatePlot.bind(this)} />
);
} else if (richTextOnly) {
editor = <RichText value={fullValue} placeholder={placeholder} onChange={updatePlot} />;
editor = (
<RichText
value={fullValue}
placeholder={placeholder}
onChange={this.updatePlot.bind(this)}
/>
);
} else if (htmlOnly) {
placeholder = _('Enter html formatted text');
editor = <HTML value={fullValue} placeholder={placeholder} onChange={updatePlot} />;
editor = (
<HTML value={fullValue} placeholder={placeholder} onChange={this.updatePlot.bind(this)} />
);
} else {
editor = <MultiFormat value={fullValue} placeholder={placeholder} onChange={updatePlot} />;
editor = (
<MultiFormat
value={fullValue}
placeholder={placeholder}
onChange={this.updatePlot.bind(this)}
/>
);
}

return (
Expand Down
18 changes: 3 additions & 15 deletions src/default_panels/StyleLayoutPanel.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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: '
)}
<div>
<span
style={{
lineHeight: '20px',
backgroundColor: '#eadef7',
borderRadius: '2px',
fontStyle: 'italic',
letterSpacing: '1px',
}}
>
{'%{meta[0]}'}
</span>
{' .'}
</div>
<p style={{letterSpacing: '1px', fontStyle: 'italic'}}>
{_("Ex: 'My custom title %{meta[1]}.' ")}
</p>
</p>
{_('Note: item count starts at 0.')}
</Info>
</PlotlyFold>
</LayoutPanel>
Expand Down