diff --git a/frontend/src/metabase/visualizations/components/settings/ChartSettingFieldPicker.jsx b/frontend/src/metabase/visualizations/components/settings/ChartSettingFieldPicker.jsx index d613aa6078b774e9e20fc1944f1725ce970b2d56..1a2f3eb5d0d95a5840bd7ceccfa26e4f8cb83e0d 100644 --- a/frontend/src/metabase/visualizations/components/settings/ChartSettingFieldPicker.jsx +++ b/frontend/src/metabase/visualizations/components/settings/ChartSettingFieldPicker.jsx @@ -1,10 +1,15 @@ import React from "react"; + import { t } from "c-3po"; -import Icon from "metabase/components/Icon"; import cx from "classnames"; +import _ from "underscore"; + +import Icon from "metabase/components/Icon"; import ChartSettingSelect from "./ChartSettingSelect.jsx"; +import { keyForColumn } from "metabase/lib/dataset"; + const ChartSettingFieldPicker = ({ value, options, @@ -12,41 +17,51 @@ const ChartSettingFieldPicker = ({ onRemove, onShowWidget, className, - currentColumnKey, -}) => ( - <div className={cx(className, "flex align-center")}> - <ChartSettingSelect - value={value} - options={options} - onChange={onChange} - placeholder={t`Select a field`} - placeholderNoOptions={t`No valid fields`} - isInitiallyOpen={value === undefined} - /> - {currentColumnKey && ( + columns, + showColumnSetting, +}) => { + let columnKey; + if (value && showColumnSetting && columns) { + const column = _.findWhere(columns, { name: value }); + if (column) { + columnKey = keyForColumn(column); + } + } + return ( + <div className={cx(className, "flex align-center")}> + <ChartSettingSelect + value={value} + options={options} + onChange={onChange} + placeholder={t`Select a field`} + placeholderNoOptions={t`No valid fields`} + isInitiallyOpen={value === undefined} + /> + {columnKey && ( + <Icon + name="gear" + className="ml1 text-medium text-brand-hover cursor-pointer" + onClick={() => { + onShowWidget({ + id: "column_settings", + props: { + initialKey: columnKey, + }, + }); + }} + /> + )} <Icon - name="gear" - className="ml1 text-medium text-brand-hover cursor-pointer" - onClick={() => { - onShowWidget({ - id: "column_settings", - props: { - initialKey: currentColumnKey, - }, - }); - }} + name="close" + className={cx("ml1 text-medium text-brand-hover cursor-pointer", { + "disabled hidden": !onRemove, + })} + width={12} + height={12} + onClick={onRemove} /> - )} - <Icon - name="close" - className={cx("ml1 text-medium text-brand-hover cursor-pointer", { - "disabled hidden": !onRemove, - })} - width={12} - height={12} - onClick={onRemove} - /> - </div> -); + </div> + ); +}; export default ChartSettingFieldPicker; diff --git a/frontend/src/metabase/visualizations/components/settings/ChartSettingFieldsPicker.jsx b/frontend/src/metabase/visualizations/components/settings/ChartSettingFieldsPicker.jsx index 86ee8cd40ac492df9f42c912972abc3f42a87aba..f996ff3b34c651a84b0ce7b373134aed4695319a 100644 --- a/frontend/src/metabase/visualizations/components/settings/ChartSettingFieldsPicker.jsx +++ b/frontend/src/metabase/visualizations/components/settings/ChartSettingFieldsPicker.jsx @@ -7,11 +7,13 @@ const ChartSettingFieldsPicker = ({ options, onChange, addAnother, + ...props }) => ( <div> {Array.isArray(value) ? ( value.map((v, index) => ( <ChartSettingFieldPicker + {...props} className={index > 0 ? "mt1" : null} key={index} value={v} diff --git a/frontend/src/metabase/visualizations/lib/settings/graph.js b/frontend/src/metabase/visualizations/lib/settings/graph.js index aa004c9155dedd74dd38c4efa018ef49952238af..e2fa93d93db7fb11ab33c670bfd3c5451a34fb16 100644 --- a/frontend/src/metabase/visualizations/lib/settings/graph.js +++ b/frontend/src/metabase/visualizations/lib/settings/graph.js @@ -139,6 +139,8 @@ export const GRAPH_DATA_SETTINGS = { vizSettings["graph.metrics"].length < 2 ? t`Add a series breakout...` : null, + columns: data.cols, + showColumnSetting: true, }; }, readDependencies: ["graph._dimension_filter", "graph._metric_filter"], @@ -175,6 +177,8 @@ export const GRAPH_DATA_SETTINGS = { vizSettings["graph.dimensions"].length < 2 ? t`Add another series...` : null, + columns: data.cols, + showColumnSetting: true, }; }, readDependencies: ["graph._dimension_filter", "graph._metric_filter"], diff --git a/frontend/src/metabase/visualizations/lib/settings/utils.js b/frontend/src/metabase/visualizations/lib/settings/utils.js index 8cae567aee5389c67a0876984df46e1cf786232c..b25d05519904f6a6d86d0acbe6a2f57b0d233889 100644 --- a/frontend/src/metabase/visualizations/lib/settings/utils.js +++ b/frontend/src/metabase/visualizations/lib/settings/utils.js @@ -1,7 +1,5 @@ import { isDimension, isMetric } from "metabase/lib/schema_metadata"; import { getFriendlyName } from "metabase/visualizations/lib/utils"; -import { keyForColumn } from "metabase/lib/dataset"; -import _ from "underscore"; export const DIMENSION_METRIC = "DIMENSION_METRIC"; export const DIMENSION_METRIC_METRIC = "DIMENSION_METRIC_METRIC"; @@ -106,26 +104,18 @@ const DEFAULT_FIELD_FILTER = () => true; export function fieldSetting( id, - { fieldFilter = DEFAULT_FIELD_FILTER, columnSetting, ...def } = {}, + { fieldFilter = DEFAULT_FIELD_FILTER, showColumnSetting, ...def } = {}, ) { return { [id]: { widget: "field", isValid: ([{ card, data }], vizSettings) => columnsAreValid(card.visualization_settings[id], data, fieldFilter), - getProps: ([{ card, data: { cols } }], vizSettings) => { - let currentColumnKey; - if (columnSetting && vizSettings[id]) { - const column = _.findWhere(cols, { name: vizSettings[id] }); - if (column) { - currentColumnKey = keyForColumn(column); - } - } - return { - options: cols.filter(fieldFilter).map(getOptionFromColumn), - currentColumnKey, - }; - }, + getProps: ([{ card, data: { cols } }], vizSettings) => ({ + options: cols.filter(fieldFilter).map(getOptionFromColumn), + columns: cols, + showColumnSetting: showColumnSetting, + }), ...def, }, }; diff --git a/frontend/src/metabase/visualizations/visualizations/PieChart.jsx b/frontend/src/metabase/visualizations/visualizations/PieChart.jsx index 92c7e30c8ae82687c8e24d1fef5f4f8cabe06606..ee4a5151788c2286c71f5d41bbbe4c082fa32317 100644 --- a/frontend/src/metabase/visualizations/visualizations/PieChart.jsx +++ b/frontend/src/metabase/visualizations/visualizations/PieChart.jsx @@ -62,12 +62,12 @@ export default class PieChart extends Component { ...dimensionSetting("pie.dimension", { section: t`Data`, title: t`Dimension`, - columnSetting: true, + showColumnSetting: true, }), ...metricSetting("pie.metric", { section: t`Data`, title: t`Measure`, - columnSetting: true, + showColumnSetting: true, }), "pie.show_legend": { section: t`Display`,