diff --git a/lib/actions/actionTypes.js b/lib/actions/actionTypes.js index 4ee18f9..abb699e 100644 --- a/lib/actions/actionTypes.js +++ b/lib/actions/actionTypes.js @@ -44,10 +44,6 @@ export const DRAG_START_HANDLER = 'DRAG_START_HANDLER'; export const DROP_HANDLER = 'DROP_HANDLER'; -export const CHANGE_CHART_TITLE = 'CHANGE_CHART_TITLE'; - -export const CHANGE_CHART_SUBTITLE = 'CHANGE_CHART_SUBTITLE'; - export const SET_LOADING = 'SET_LOADING'; export const SELECT_SAVED_QUERY = 'SELECT_SAVED_QUERY'; diff --git a/lib/actions/rootActions.js b/lib/actions/rootActions.js index 984e5ae..1acdcc3 100644 --- a/lib/actions/rootActions.js +++ b/lib/actions/rootActions.js @@ -248,18 +248,6 @@ export const dropHandler = newElement => ({ newElement }); -export const changeChartTitle = (title, index) => ({ - type: actions.CHANGE_CHART_TITLE, - title, - index -}); - -export const changeChartSubitle = (subtitle, index) => ({ - type: actions.CHANGE_CHART_SUBTITLE, - subtitle, - index -}); - export const setLoading = index => ({ type: actions.SET_LOADING, index diff --git a/lib/builder/components/Chart.js b/lib/builder/components/Chart.js index cc045ca..27b2c4c 100644 --- a/lib/builder/components/Chart.js +++ b/lib/builder/components/Chart.js @@ -43,7 +43,10 @@ class Chart extends Component { !_.isEqual(this.props.point, nextProps.point) || !_.isEqual(this.props.choropleth, nextProps.choropleth) || !_.isEqual(this.props.heatmap, nextProps.heatmap) || - !_.isEqual(this.props.funnel, nextProps.funnel) + !_.isEqual(this.props.funnel, nextProps.funnel) || + this.props.title !== nextProps.title || + this.props.subtitle !== nextProps.subtitle || + !_.isEqual(this.props.axis, nextProps.axis) ) { return true; } diff --git a/lib/builder/components/ChartContainer.js b/lib/builder/components/ChartContainer.js index 0e78532..cb5cbd9 100644 --- a/lib/builder/components/ChartContainer.js +++ b/lib/builder/components/ChartContainer.js @@ -3,8 +3,6 @@ import React, { Component } from 'react'; import { connect } from 'react-redux'; import { - changeChartTitle, - changeChartSubitle, loadSavedQuery, savedQueryError, setLoading @@ -166,77 +164,16 @@ class ChartContainer extends Component { render() { const { - chartTitle, - chartSubtitle, index, - legend, - sparkline, - stacking, isLoading, dryRun, version, error, - showPoints, - pointsSize, - mapChoropleth, - borderChoropleth, - borderSizeChoropleth, - slidersChoropleth, - slidersHeatmap, - heatmapTooltipValue, template, id, charts_theme } = this.props; const { loading, results, type } = this.state; - if ( - chartTitle === undefined && - results && - results.metadata && - results.metadata.display_name - ) { - const displayName = results.metadata.display_name; - this.props.changeChartTitle(displayName, index); - } - - const pointSettings = { - show: showPoints ? !!showPoints.value : true, - r: pointsSize ? pointsSize.value : 2.5 - }; - - const choroplethSettings = { - map: mapChoropleth ? mapChoropleth.value : 'world', - borders: { - show: borderChoropleth ? borderChoropleth.value : true, - size: borderSizeChoropleth ? borderSizeChoropleth.value : 0.5 - }, - showSlider: slidersChoropleth ? slidersChoropleth.value : false - }; - - const heatmapSettings = { - showSlider: slidersHeatmap ? slidersHeatmap.value : false, - simpleTooltip: heatmapTooltipValue ? heatmapTooltipValue.value : false - }; - - const title = - template && template['title.show'] ? template['title.text'] : false; - const subtitle = - template && template['subtitle.show'] ? template['subtitle.text'] : false; - const legendAlignment = - template['legend.layout'] === 'top' || - template['legend.layout'] === 'bottom' - ? template['legend.position.horizontal'] - : template['legend.position.vertical']; - const legendOptions = { - show: template['legend.show'], - position: template['legend.layout'], - alignment: legendAlignment - }; - const data = template['series.label.show'] ? { labels: true } : false; - const point = { - show: template['series.points.show'], - r: template['series.points.size'] - }; const chartOptions = charts_theme && charts_theme[index] !== undefined && @@ -245,38 +182,6 @@ class ChartContainer extends Component { : {}; return ( <React.Fragment> - {(((version === 'editor' || (version === 'viewer' && chartTitle)) && - (chartOptions && - chartOptions.theme && - chartOptions.theme.title_show)) || - (template && template.theme && template.theme.title_show)) && ( - <div className="chart-title"> - <input - type="text" - value={chartTitle || ''} - onChange={e => this.props.changeChartTitle(e.target.value, index)} - placeholder="Enter your title..." - readOnly={version === 'viewer'} - /> - </div> - )} - {(((version === 'editor' || (version === 'viewer' && chartSubtitle)) && - (chartOptions && - chartOptions.theme && - chartOptions.theme.subtitle_show)) || - (template && template.theme && template.theme.subtitle_show)) && ( - <div className="chart-subtitle"> - <input - type="text" - value={chartSubtitle || ''} - onChange={e => - this.props.changeChartSubitle(e.target.value, index) - } - placeholder="Enter your subtitle..." - readOnly={version === 'viewer'} - /> - </div> - )} {Object.keys(chartOptions).length ? ( <CustomChartTheme theme={chartOptions.theme} @@ -343,8 +248,6 @@ const mapStateToProps = state => { const mapDispatchToProps = { loadSavedQuery, - changeChartTitle, - changeChartSubitle, savedQueryError, setLoading }; diff --git a/lib/reducers/rootReducer.js b/lib/reducers/rootReducer.js index 2722698..36b2aee 100644 --- a/lib/reducers/rootReducer.js +++ b/lib/reducers/rootReducer.js @@ -411,46 +411,6 @@ const appReducer = (state = defaultData, action) => { draggedType: {}, settingsVisible: dashboardInfo.data.items.length }; - case actionTypes.CHANGE_CHART_TITLE: - return { - ...state, - dashboardInfo: { - ...dashboardInfo, - data: { - ...dashboardInfo.data, - items: [ - ...dashboardInfo.data.items.map((el, i) => - action.index === i - ? { - ...el, - chartTitle: action.title - } - : el - ) - ] - } - } - }; - case actionTypes.CHANGE_CHART_SUBTITLE: - return { - ...state, - dashboardInfo: { - ...dashboardInfo, - data: { - ...dashboardInfo.data, - items: [ - ...dashboardInfo.data.items.map((el, i) => - action.index === i - ? { - ...el, - chartSubtitle: action.subtitle - } - : el - ) - ] - } - } - }; case actionTypes.RESIZE_CHART: return { ...state, diff --git a/lib/viewer/components/EditorDashboard.js b/lib/viewer/components/EditorDashboard.js index f0e4f80..decb582 100644 --- a/lib/viewer/components/EditorDashboard.js +++ b/lib/viewer/components/EditorDashboard.js @@ -207,184 +207,6 @@ class EditorDashboard extends Component { } }; - getCSSRules = (state = {}) => ({ - chartBackground: state['appearance.background'] - ? `background-color: ${state['appearance.background']};` - : 'background-color: inherit;', - chartBorder: state['appearance.border'] - ? `border-color: ${state['appearance.border']};` - : 'border-color: inherit;', - chartFont: state['appearance.font.family'] - ? `font-family: "${state['appearance.font.family']}";` - : 'font-family: inherit;', - titleTextAlign: `text-align: ${state['title.textAlign']};`, - titleColor: state['title.color'] - ? `color: ${state['title.color']};` - : 'color: inherit;', - titleFontFamily: state['title.font.family'] - ? `font-family: "${state['title.font.family']}";` - : 'font-family: inherit;', - titleFontSize: - state['title.font.size'] !== 'auto' - ? `font-size: ${state['title.font.size']}px;` - : 'font-size: inherit;', - titleFontBold: state['title.font.bold'] - ? 'font-weight: bold;' - : 'font-weight: inherit;', - titleFontItalic: state['title.font.italic'] - ? 'font-style: italic;' - : 'font-style: inherit;', - subtitleTextAlign: `text-align: ${state['subtitle.textAlign']};`, - subtitleColor: state['subtitle.color'] - ? `color: ${state['subtitle.color']};` - : 'color: inherit;', - subtitleFontFamily: state['subtitle.font.family'] - ? `font-family: "${state['subtitle.font.family']}";` - : 'font-family: inherit;', - subtitleFontSize: - state['subtitle.font.size'] !== 'auto' - ? `font-size: ${state['subtitle.font.size']}px;` - : 'font-size: inherit;', - subtitleFontBold: state['subtitle.font.bold'] - ? 'font-weight: bold;' - : 'font-weight: inherit;', - subtitleFontItalic: state['subtitle.font.italic'] - ? 'font-style: italic;' - : 'font-style: inherit;', - axisYTitleFont: state['axis.vertical.title.font.family'] - ? `font-family: "${state['axis.vertical.title.font.family']}";` - : 'font-family: inherit;', - axisYTitleFontSize: - state['axis.vertical.title.font.size'] !== 'auto' - ? `font-size: ${state['axis.vertical.title.font.size']}px;` - : 'font-size: inherit;', - axisYTitleFontBold: state['axis.vertical.title.font.bold'] - ? 'font-weight: bold;' - : 'font-weight: inherit;', - axisYTitleFontItalic: state['axis.vertical.title.font.italic'] - ? 'font-style: italic;' - : 'font-style: inherit;', - axisYTitleColor: state['axis.vertical.title.color'] - ? `fill: ${state['axis.vertical.title.color']};` - : 'fill: inherit;', - axisYLabelFont: state['axis.vertical.label.font.family'] - ? `font-family: "${state['axis.vertical.label.font.family']}";` - : 'font-family: inherit;', - axisYLabelFontSize: - state['axis.vertical.label.font.size'] !== 'auto' - ? `font-size: ${state['axis.vertical.label.font.size']}px;` - : 'font-size: inherit;', - axisYLabelFontBold: state['axis.vertical.label.font.bold'] - ? 'font-weight: bold;' - : 'font-weight: inherit;', - axisYLabelFontItalic: state['axis.vertical.label.font.italic'] - ? 'font-style: italic;' - : 'font-style: inherit;', - axisYLabelColor: state['axis.vertical.label.color'] - ? `fill: ${state['axis.vertical.label.color']};` - : 'fill: inherit;', - axisXTitleFont: state['axis.horizontal.title.font.family'] - ? `font-family: "${state['axis.horizontal.title.font.family']}";` - : 'font-family: inherit;', - axisXTitleFontSize: - state['axis.horizontal.title.font.size'] !== 'auto' - ? `font-size: ${state['axis.horizontal.title.font.size']}px;` - : 'font-size: inherit;', - axisXTitleFontBold: state['axis.horizontal.title.font.bold'] - ? 'font-weight: bold;' - : 'font-weight: inherit;', - axisXTitleFontItalic: state['axis.horizontal.title.font.italic'] - ? 'font-style: italic;' - : 'font-style: inherit;', - axisXTitleColor: state['axis.horizontal.title.color'] - ? `fill: ${state['axis.horizontal.title.color']};` - : 'fill: inherit;', - axisXLabelFont: state['axis.horizontal.label.font.family'] - ? `font-family: "${state['axis.horizontal.label.font.family']}";` - : 'font-family: inherit;', - axisXLabelFontSize: - state['axis.horizontal.label.font.size'] !== 'auto' - ? `font-size: ${state['axis.horizontal.label.font.size']}px;` - : 'font-size: inherit;', - axisXLabelFontBold: state['axis.horizontal.label.font.bold'] - ? 'font-weight: bold;' - : 'font-weight: inherit;', - axisXLabelFontItalic: state['axis.horizontal.label.font.italic'] - ? 'font-style: italic;' - : 'font-style: inherit;', - axisXLabelColor: state['axis.horizontal.label.color'] - ? `fill: ${state['axis.horizontal.label.color']};` - : 'fill: inherit;', - legendFont: state['legend.font.family'] - ? `font-family: "${state['legend.font.family']}";` - : 'font-family: inherit;', - legendFontSize: - state['legend.font.size'] !== 'auto' - ? `font-size: ${state['legend.font.size']}px;` - : 'font-size: inherit;', - legendFontBold: state['legend.font.bold'] - ? 'font-weight: bold;' - : 'font-weight: inherit;', - legendFontItalic: state['legend.font.italic'] - ? 'font-style: italic;' - : 'font-style: inherit;', - legendColor: state['legend.color'] - ? `color: ${state['legend.color']};` - : 'color: inherit;', - gridLineShow: state['grid.show'] - ? 'stroke-opacity: 1;' - : 'stroke-opacity: 0;', - gridLineColor: state['grid.lines.color'] - ? `stroke: ${state['grid.lines.color']}` - : 'stroke: inherit;', - subgridLineColor: state['subgrid.lines.color'] - ? `stroke: ${state['subgrid.lines.count']}` - : 'stroke: inherit;', - seriesLabelFont: state['series.label.font.family'] - ? `font-family: "${state['series.label.font.family']}";` - : 'font-family: inherit;', - seriesLabelFontSize: - state['series.label.font.size'] !== 'auto' - ? `font-size: ${state['series.label.font.size']}px;` - : 'font-size: inherit;', - seriesLabelFontBold: state['series.label.font.bold'] - ? 'font-weight: bold;' - : 'font-weight: inherit;', - seriesLabelFontItalic: state['series.label.font.italic'] - ? 'font-style: italic;' - : 'font-style: inherit;', - seriesLabelColor: state['series.label.color'] - ? `fill: ${state['series.label.color']} !important;` - : 'fill: inherit;', - seriesLabelTextAlign: `text-anchor: ${this.mapTextAnchor( - state['series.label.textAlign'] - )} !important;`, - seriesLineThickness: `stroke-width: ${state['series.line']}px;`, - tooltipFont: state['tooltip.font.family'] - ? `font-family: "${state['tooltip.font.family']}";` - : 'font-family: inherit;', - tooltipFontSize: - state['tooltip.font.size'] !== 'auto' - ? `font-size: ${state['tooltip.font.size']}px;` - : 'font-size: inherit;', - tooltipFontBold: state['tooltip.font.bold'] - ? 'font-weight: bold;' - : 'font-weight: inherit;', - tooltipFontItalic: state['tooltip.font.italic'] - ? 'font-style: italic;' - : 'font-style: inherit;', - tooltipColor: state['tooltip.color'] - ? `color: ${state['tooltip.color']};` - : 'color: inherit;', - tooltipBackground: state['tooltip.background'] - ? `background-color: ${state['tooltip.background']};` - : '', - tooltipBorder: - state['tooltip.border'] && state['tooltip.border'] !== 'transparent' - ? `border-color: ${state['tooltip.border']};` - : '' - }); - render() { const { data, diff --git a/lib/viewer/index.js b/lib/viewer/index.js index c741ee4..f7ce6ae 100644 --- a/lib/viewer/index.js +++ b/lib/viewer/index.js @@ -115,7 +115,6 @@ DashboardViewer.propTypes = { version: PropTypes.number, items: PropTypes.arrayOf( PropTypes.shape({ - chartTitle: PropTypes.string, height: PropTypes.number, width: PropTypes.number, top: PropTypes.number, diff --git a/styles/style.css b/styles/style.css index 0421f6b..bd4a52f 100644 --- a/styles/style.css +++ b/styles/style.css @@ -517,7 +517,6 @@ body { display: flex; justify-content: center; align-items: center; - border: 1px solid #eee; border-radius: 5px; display: flex; flex-direction: column;