diff --git a/bin/debug-proxy b/bin/debug-proxy
index 1e5450cb4c26cc10f48a4da6ab1b30f94f26d87d..864602c8d6179c3456ff32a248312791ed6d32d3 100755
--- a/bin/debug-proxy
+++ b/bin/debug-proxy
@@ -6,9 +6,14 @@
var http = require("http");
var httpProxy = require("http-proxy");
+var url = require("url");
var backendTarget = process.argv[2] || "https://staging.metabase.com/";
var frontendTarget = process.argv[3] || "http://127.0.0.1:3000/";
+
+var backendHost = url.parse(backendTarget).host;
+var frontendHost = url.parse(frontendTarget).host;
+
var listenPort = parseInt(process.argv[4] || "3001");
var proxy = httpProxy.createProxyServer({ secure: false });
@@ -16,9 +21,11 @@ var proxy = httpProxy.createProxyServer({ secure: false });
var server = http.createServer(function(req, res) {
if (/^\/app\//.test(req.url)) {
console.log("FRONTEND: " + req.url);
+ req.headers.host = frontendHost;
proxy.web(req, res, { target: frontendTarget });
} else {
console.log("BACKEND: " + req.url);
+ req.headers.host = backendHost;
proxy.web(req, res, { target: backendTarget });
}
});
diff --git a/frontend/src/metabase/components/Select.jsx b/frontend/src/metabase/components/Select.jsx
index ea93346df87c3fd872c64ac54de272a2c6d8d0e0..4038bd1fe20685ab42caff6b1d1c015d6f37454c 100644
--- a/frontend/src/metabase/components/Select.jsx
+++ b/frontend/src/metabase/components/Select.jsx
@@ -48,7 +48,7 @@ class BrowserSelect extends Component {
}
render() {
- const { children, className, onChange, searchProp, searchCaseInsensitive, isInitiallyOpen, placeholder } = this.props;
+ const { className, children, value, onChange, searchProp, searchCaseInsensitive, isInitiallyOpen, placeholder } = this.props;
let selectedName;
for (const child of children) {
@@ -78,9 +78,9 @@ class BrowserSelect extends Component {
return (
<PopoverWithTrigger
ref="popover"
- className={this.props.className}
+ className={className}
triggerElement={
- <div className={"flex align-center " + (!this.props.value ? " text-grey-3" : "")}>
+ <div className={"flex align-center " + (!value ? " text-grey-3" : "")}>
<span className="mr1">{selectedName}</span>
<Icon className="flex-align-right" name="chevrondown" size={12} />
</div>
@@ -151,6 +151,7 @@ class LegacySelect extends Component {
optionNameFn: PropTypes.func,
optionValueFn: PropTypes.func,
className: PropTypes.string,
+ isInitiallyOpen: PropTypes.bool,
//TODO: clean up hardcoded "AdminSelect" class on trigger to avoid this workaround
triggerClasses: PropTypes.string
};
@@ -158,7 +159,8 @@ class LegacySelect extends Component {
static defaultProps = {
placeholder: "",
optionNameFn: (option) => option.name,
- optionValueFn: (option) => option
+ optionValueFn: (option) => option,
+ isInitiallyOpen: false,
};
toggle() {
@@ -166,17 +168,19 @@ class LegacySelect extends Component {
}
render() {
- var selectedName = this.props.value ? this.props.optionNameFn(this.props.value) : this.props.placeholder;
+ const { className, value, onChange, options, optionNameFn, optionValueFn, placeholder, isInitiallyOpen } = this.props;
+
+ var selectedName = value ? optionNameFn(value) : placeholder;
var triggerElement = (
- <div className={"flex align-center " + (!this.props.value ? " text-grey-3" : "")}>
+ <div className={"flex align-center " + (!value ? " text-grey-3" : "")}>
<span className="mr1">{selectedName}</span>
<Icon className="flex-align-right" name="chevrondown" size={12}/>
</div>
);
var sections = {};
- this.props.options.forEach(function (option) {
+ options.forEach(function (option) {
var sectionName = option.section || "";
sections[sectionName] = sections[sectionName] || { title: sectionName || undefined, items: [] };
sections[sectionName].items.push(option);
@@ -185,12 +189,12 @@ class LegacySelect extends Component {
var columns = [
{
- selectedItem: this.props.value,
+ selectedItem: value,
sections: sections,
- itemTitleFn: this.props.optionNameFn,
+ itemTitleFn: optionNameFn,
itemDescriptionFn: (item) => item.description,
itemSelectFn: (item) => {
- this.props.onChange(this.props.optionValueFn(item))
+ onChange(optionValueFn(item))
this.toggle();
}
}
@@ -199,9 +203,10 @@ class LegacySelect extends Component {
return (
<PopoverWithTrigger
ref="popover"
- className={this.props.className}
+ className={className}
triggerElement={triggerElement}
triggerClasses={this.props.triggerClasses || cx("AdminSelect", this.props.className)}
+ isInitiallyOpen={isInitiallyOpen}
>
<div onClick={(e) => e.stopPropagation()}>
<ColumnarSelector
diff --git a/frontend/src/metabase/components/Triggerable.jsx b/frontend/src/metabase/components/Triggerable.jsx
index 257c0d6b45fea186bc1ba2a3360fa8f2442954db..0a784bfea3aa75aa4590a2fd106b1d2169b32850 100644
--- a/frontend/src/metabase/components/Triggerable.jsx
+++ b/frontend/src/metabase/components/Triggerable.jsx
@@ -21,6 +21,7 @@ export default ComposedComponent => class extends Component {
this._startCheckObscured = this._startCheckObscured.bind(this);
this._stopCheckObscured = this._stopCheckObscured.bind(this);
+ this.onClose = this.onClose.bind(this);
}
static defaultProps = {
@@ -91,18 +92,27 @@ export default ComposedComponent => class extends Component {
render() {
const { triggerClasses, triggerClassesOpen } = this.props;
const { isOpen } = this.state;
+
let { triggerElement } = this.props;
if (triggerElement && triggerElement.type === Tooltip) {
// Disables tooltip when open:
triggerElement = React.cloneElement(triggerElement, { isEnabled: triggerElement.props.isEnabled && !isOpen });
}
+
+ // if we have a single child which doesn't have an onClose prop go ahead and inject it directly
+ let { children } = this.props;
+ if (React.Children.count(children) === 1 && React.Children.only(children).props.onClose === undefined) {
+ children = React.cloneElement(children, { onClose: this.onClose });
+ }
+
return (
<a ref="trigger" onClick={() => this.toggle()} className={cx("no-decoration", triggerClasses, isOpen ? triggerClassesOpen : null)}>
{triggerElement}
<ComposedComponent
{...this.props}
+ children={children}
isOpen={isOpen}
- onClose={this.onClose.bind(this)}
+ onClose={this.onClose}
target={() => this.target()}
/>
</a>
diff --git a/frontend/src/metabase/css/components/modal.css b/frontend/src/metabase/css/components/modal.css
index 62375134b4c58248f36db7efeb2e206d00f53a72..4943174579f853b123efb77791f1b02b9a8f8f63 100644
--- a/frontend/src/metabase/css/components/modal.css
+++ b/frontend/src/metabase/css/components/modal.css
@@ -10,6 +10,10 @@
.Modal.Modal--medium { width: 65%; }
.Modal.Modal--wide { width: 85%; }
+.Modal.Modal--tall {
+ min-height: 85%;
+}
+
.Modal-backdrop {
background-color: rgba(255, 255, 255, 0.6);
}
diff --git a/frontend/src/metabase/css/core/hide.css b/frontend/src/metabase/css/core/hide.css
index faafa64de1f50c5304d29f35e35865ca0a885432..c8a51968ad5b6559408958da6fce57a4e8c635e3 100644
--- a/frontend/src/metabase/css/core/hide.css
+++ b/frontend/src/metabase/css/core/hide.css
@@ -1,6 +1,8 @@
.hide { display: none !important; }
.show { display: inheirt; }
+.hidden { visibility: hidden; }
+
.sm-show,
.md-show,
.lg-show,
diff --git a/frontend/src/metabase/dashboard/components/DashCard.jsx b/frontend/src/metabase/dashboard/components/DashCard.jsx
index f904a8a68db8c645056a9d5418f97a91a01ce535..d8c5f97fcc3d8ddf41af48a68c770a38baea4d61 100644
--- a/frontend/src/metabase/dashboard/components/DashCard.jsx
+++ b/frontend/src/metabase/dashboard/components/DashCard.jsx
@@ -4,6 +4,9 @@ import ReactDOM from "react-dom";
import visualizations from "metabase/visualizations";
import Visualization from "metabase/visualizations/components/Visualization.jsx";
+import ModalWithTrigger from "metabase/components/ModalWithTrigger.jsx";
+import ChartSettings from "metabase/visualizations/components/ChartSettings.jsx";
+
import Icon from "metabase/components/Icon.jsx";
import DashCardParameterMapper from "../components/parameters/DashCardParameterMapper.jsx";
@@ -115,7 +118,14 @@ export default class DashCard extends Component {
isDashboard={true}
isEditing={isEditing}
gridSize={this.props.isMobile ? undefined : { width: dashcard.sizeX, height: dashcard.sizeY }}
- actionButtons={isEditing && !isEditingParameter ? <DashCardActionButtons series={series} visualization={CardVisualization} onRemove={onRemove} onAddSeries={onAddSeries} /> : undefined}
+ actionButtons={isEditing && !isEditingParameter ?
+ <DashCardActionButtons
+ series={series}
+ visualization={CardVisualization}
+ onRemove={onRemove}
+ onAddSeries={onAddSeries}
+ /> : undefined
+ }
onUpdateVisualizationSetting={this.props.onUpdateVisualizationSetting}
replacementContent={isEditingParameter && <DashCardParameterMapper dashcard={dashcard} />}
/>
@@ -124,21 +134,40 @@ export default class DashCard extends Component {
}
}
-const DashCardActionButtons = ({ series, visualization, onRemove, onAddSeries }) =>
+const DashCardActionButtons = ({ series, visualization, onRemove, onAddSeries, onUpdateVisualizationSettings }) =>
<span className="DashCard-actions flex align-center">
{ visualization.supportsSeries &&
<AddSeriesButton series={series} onAddSeries={onAddSeries} />
}
+ { onUpdateVisualizationSettings &&
+ <ChartSettingsButton series={series} onChange={onUpdateVisualizationSettings} />
+ }
<RemoveButton onRemove={onRemove} />
</span>
+const ChartSettingsButton = ({ series, onUpdateVisualizationSettings }) =>
+ <ModalWithTrigger
+ className="Modal Modal--wide Modal--tall"
+ triggerElement={<Icon name="gear" />}
+ triggerClasses="text-grey-2 text-grey-4-hover cursor-pointer mr1 flex align-center flex-no-shrink"
+ >
+ <ChartSettings
+ series={series}
+ onChange={onUpdateVisualizationSettings}
+ />
+ </ModalWithTrigger>
+
const RemoveButton = ({ onRemove }) =>
<a className="text-grey-2 text-grey-4-hover expand-clickable" data-metabase-event="Dashboard;Remove Card Modal" href="#" onClick={onRemove}>
<Icon name="close" size={14} />
</a>
const AddSeriesButton = ({ series, onAddSeries }) =>
- <a data-metabase-event={"Dashboard;Edit Series Modal;open"} className="text-grey-2 text-grey-4-hover cursor-pointer h3 ml1 mr2 flex align-center flex-no-shrink relative" onClick={onAddSeries}>
+ <a
+ data-metabase-event={"Dashboard;Edit Series Modal;open"}
+ className="text-grey-2 text-grey-4-hover cursor-pointer h3 ml1 mr2 flex align-center flex-no-shrink relative"
+ onClick={onAddSeries}
+ >
<Icon className="absolute" style={{ top: 2, left: 2 }} name="add" size={8} />
<Icon name={getSeriesIconName(series)} size={12} />
<span className="flex-no-shrink">{ series.length > 1 ? "Edit" : "Add" }</span>
diff --git a/frontend/src/metabase/home/containers/HomepageApp.jsx b/frontend/src/metabase/home/containers/HomepageApp.jsx
index 149a1e6866c59748b5ef4deacdc8455e47f12455..53ebb22d079a0aea718d9254703f28ff4e122832 100644
--- a/frontend/src/metabase/home/containers/HomepageApp.jsx
+++ b/frontend/src/metabase/home/containers/HomepageApp.jsx
@@ -12,15 +12,14 @@ import NewUserOnboardingModal from '../components/NewUserOnboardingModal.jsx';
import NextStep from "../components/NextStep.jsx";
import * as homepageActions from "../actions";
-
+import { getActivity, getRecentViews, getUser, getShowOnboarding } from "../selectors";
const mapStateToProps = (state, props) => {
return {
- activity: state.home && state.home.activity,
- recentViews: state.home && state.home.recentViews,
- user: state.currentUser,
- showOnboarding: state.router && state.router.location && "new" in state.router.location.query
- // onChangeLocation
+ activity: getActivity(state),
+ recentViews: getRecentViews(state),
+ user: getUser(state),
+ showOnboarding: getShowOnboarding(state)
}
}
diff --git a/frontend/src/metabase/home/selectors.js b/frontend/src/metabase/home/selectors.js
index 6a6691c0ef324e1e704a3748f5411b0fb8b335c1..75a8b5430efcd9318fc409b1366a07e5ae3694fc 100644
--- a/frontend/src/metabase/home/selectors.js
+++ b/frontend/src/metabase/home/selectors.js
@@ -1,8 +1,4 @@
-import { createSelector } from 'reselect';
-
-export const homepageSelectors = createSelector(
- [state => state.activity,
- state => state.recentViews],
-
- (activity, recentViews) => ({activity, recentViews})
-);
+export const getActivity = (state) => state.home && state.home.activity
+export const getRecentViews = (state) => state.home && state.home.recentViews
+export const getUser = (state) => state.currentUser
+export const getShowOnboarding = (state) => state.router && state.router.location && "new" in state.router.location.query
diff --git a/frontend/src/metabase/icon_paths.js b/frontend/src/metabase/icon_paths.js
index 79aa0f35a30e9ea40375931e7f39f5f3b3df778f..9c4a9374a3340f1357cc3cb3ef795456c9eef506 100644
--- a/frontend/src/metabase/icon_paths.js
+++ b/frontend/src/metabase/icon_paths.js
@@ -84,6 +84,7 @@ export var ICON_PATHS = {
funneladd: 'M22.5185184,5.27947653 L17.2510286,5.27947653 L17.2510286,9.50305775 L22.5185184,9.50305775 L22.5185184,14.7825343 L26.7325102,14.7825343 L26.7325102,9.50305775 L32,9.50305775 L32,5.27947653 L26.7325102,5.27947653 L26.7325102,0 L22.5185184,0 L22.5185184,5.27947653 Z M14.9369872,0.791920724 C14.9369872,0.791920724 2.77552871,0.83493892 1.86648164,0.83493892 C0.957434558,0.83493892 0.45215388,1.50534608 0.284450368,1.77831828 C0.116746855,2.05129048 -0.317642562,2.91298361 0.398382661,3.9688628 C1.11440788,5.024742 9.74577378,17.8573356 9.74577378,17.8573356 C9.74577378,17.8573356 9.74577394,28.8183645 9.74577378,29.6867194 C9.74577362,30.5550744 9.83306175,31.1834301 10.7557323,31.6997692 C11.6784029,32.2161084 12.4343349,31.9564284 12.7764933,31.7333621 C13.1186517,31.5102958 19.6904355,27.7639669 20.095528,27.4682772 C20.5006204,27.1725875 20.7969652,26.5522071 20.7969651,25.7441659 C20.7969649,24.9361247 20.7969651,18.2224765 20.7969651,18.2224765 L21.6163131,16.9859755 L18.152048,15.0670739 C18.152048,15.0670739 17.3822517,16.199685 17.2562629,16.4000338 C17.1302741,16.6003826 16.8393552,16.9992676 16.8393551,17.7062886 C16.8393549,18.4133095 16.8393551,24.9049733 16.8393551,24.9049733 L13.7519708,26.8089871 C13.7519708,26.8089871 13.7318369,18.3502323 13.7318367,17.820601 C13.7318366,17.2909696 13.8484216,16.6759061 13.2410236,15.87149 C12.6336257,15.0670739 5.59381579,4.76288686 5.59381579,4.76288686 L14.9359238,4.76288686 L14.9369872,0.791920724 Z',
folder: "M3.96901618e-15,5.41206355 L0.00949677904,29 L31.8821132,29 L31.8821132,10.8928571 L18.2224205,10.8928571 L15.0267944,5.41206355 L3.96901618e-15,5.41206355 Z M16.8832349,5.42402804 L16.8832349,4.52140947 C16.8832349,3.68115822 17.5639241,3 18.4024298,3 L27.7543992,3 L30.36417,3 C31.2031259,3 31.8832341,3.67669375 31.8832341,4.51317691 L31.8832341,7.86669975 L31.8832349,8.5999999 L18.793039,8.5999999 L16.8832349,5.42402804 Z",
gear: 'M14 0 H18 L19 6 L20.707 6.707 L26 3.293 L28.707 6 L25.293 11.293 L26 13 L32 14 V18 L26 19 L25.293 20.707 L28.707 26 L26 28.707 L20.707 25.293 L19 26 L18 32 L14 32 L13 26 L11.293 25.293 L6 28.707 L3.293 26 L6.707 20.707 L6 19 L0 18 L0 14 L6 13 L6.707 11.293 L3.293 6 L6 3.293 L11.293 6.707 L13 6 L14 0 z M16 10 A6 6 0 0 0 16 22 A6 6 0 0 0 16 10',
+ grabber: 'M0,5 L32,5 L32,9.26666667 L0,9.26666667 L0,5 Z M0,13.5333333 L32,13.5333333 L32,17.8 L0,17.8 L0,13.5333333 Z M0,22.0666667 L32,22.0666667 L32,26.3333333 L0,26.3333333 L0,22.0666667 Z',
grid: 'M2 2 L10 2 L10 10 L2 10z M12 2 L20 2 L20 10 L12 10z M22 2 L30 2 L30 10 L22 10z M2 12 L10 12 L10 20 L2 20z M12 12 L20 12 L20 20 L12 20z M22 12 L30 12 L30 20 L22 20z M2 22 L10 22 L10 30 L2 30z M12 22 L20 22 L20 30 L12 30z M22 22 L30 22 L30 30 L22 30z',
google: {
svg: '<g fill="none" fill-rule="evenodd"><path d="M16 32c4.32 0 7.947-1.422 10.596-3.876l-5.05-3.91c-1.35.942-3.164 1.6-5.546 1.6-4.231 0-7.822-2.792-9.102-6.65l-5.174 4.018C4.356 28.41 9.742 32 16 32z" fill="#34A853"/><path d="M6.898 19.164A9.85 9.85 0 0 1 6.364 16c0-1.102.196-2.169.516-3.164L1.707 8.818A16.014 16.014 0 0 0 0 16c0 2.578.622 5.013 1.707 7.182l5.19-4.018z" fill="#FBBC05"/><path d="M31.36 16.356c0-1.316-.107-2.276-.338-3.272H16v5.938h8.818c-.178 1.476-1.138 3.698-3.271 5.191l5.049 3.911c3.022-2.79 4.764-6.897 4.764-11.768z" fill="#4285F4"/><path d="M16 6.187c3.004 0 5.031 1.297 6.187 2.382l4.515-4.409C23.93 1.582 20.32 0 16 0 9.742 0 4.338 3.591 1.707 8.818l5.173 4.018c1.298-3.858 4.889-6.65 9.12-6.65z" fill="#EA4335"/></g>'
diff --git a/frontend/src/metabase/lib/schema_metadata.js b/frontend/src/metabase/lib/schema_metadata.js
index 41f2ea1b69d8ee9de9ba305c550d776e9d32c0f6..70ab6d0974a80a9cd8d0d6568b207d78c7e0a2ab 100644
--- a/frontend/src/metabase/lib/schema_metadata.js
+++ b/frontend/src/metabase/lib/schema_metadata.js
@@ -107,7 +107,7 @@ export const isSummable = isFieldType.bind(null, SUMMABLE);
export const isCategory = isFieldType.bind(null, CATEGORY);
export const isDimension = (col) => (col && col.source !== "aggregation");
-export const isMetric = (col) => (col && col.source !== "breakout") && isNumeric(col);
+export const isMetric = (col) => (col && col.source !== "breakout") && isSummable(col);
export const isNumericBaseType = (field) => TYPES[NUMBER].base
.some(type => type === field.base_type);
diff --git a/frontend/src/metabase/lib/visualization_settings.js b/frontend/src/metabase/lib/visualization_settings.js
index f4439a923a3eed64389ea51f9337f3ea644c29d7..79c57088057962f6fe0d94902775902c5191513b 100644
--- a/frontend/src/metabase/lib/visualization_settings.js
+++ b/frontend/src/metabase/lib/visualization_settings.js
@@ -1,230 +1,573 @@
+import _ from "underscore";
+import crossfilter from "crossfilter";
-import { normal, harmony } from 'metabase/lib/colors'
+import {
+ getChartTypeFromData,
+ DIMENSION_DIMENSION_METRIC,
+ DIMENSION_METRIC,
+ DIMENSION_METRIC_METRIC
+} from "metabase/visualizations/lib/utils";
-import _ from "underscore";
+import { isNumeric, isDate, isMetric, isDimension, hasLatitudeAndLongitudeColumns } from "metabase/lib/schema_metadata";
+import Query from "metabase/lib/query";
-const DEFAULT_COLOR_HARMONY = Object.values(normal);
-const DEFAULT_COLOR = DEFAULT_COLOR_HARMONY[0];
-
-const EXPANDED_COLOR_HARMONY = harmony;
-
-/* *** visualization settings ***
- *
- * This object defines default settings for card visualizations (i.e. charts, maps, etc).
- * Each visualization type can be associated with zero or more top-level settings groups defined in this object
- * (i.e. line charts may use 'chart', 'xAxis', 'yAxis', 'line'), depending on the settings that are appropriate
- * for the particular visualization type (the associations are defined below in groupsForVisualizations).
- *
- * Before a card renders, the default settings from the appropriate groups are first copied from this object,
- * creating an in-memory default settings object for that rendering.
- * Then, a settings object stored in the card's record in the database is read and any attributes defined there
- * are applied to that in-memory default settings object (using _.defaults()).
- * The resulting in-memory settings object is made available to the card renderer at the time
- * visualization is rendered.
- *
- * The settings object stored in the DB is 'sparse': only settings that differ from the defaults
- * (at the time the settings were set) are recorded in the DB. This allows us to easily change the appearance of
- * visualizations globally, except in cases where the user has explicitly changed the default setting.
- *
- * Some settings accept aribtrary numbers or text (i.e. titles) and some settings accept only certain values
- * (i.e. *_enabled settings must be one of true or false). However, this object does not define the constraints.
- * Instead, the controller that presents the UI to change the settings is currently responsible for enforcing the
- * appropriate contraints for each setting.
- *
- * Search for '*** visualization settings ***' in card.controllers.js to find the objects that contain
- * choices for the settings that require them.
- * Additional constraints are enforced by the input elements in the views for each settings group
- * (see app/card/partials/settings/*.html).
- *
- */
-var settings = {
- 'global': {
- 'title': null
- },
- 'columns': {
- 'dataset_column_titles': [] //allows the user to define custom titles for each column in the resulting dataset. Each item in this array corresponds to a column in the dataset's data.columns array.
- },
- 'chart': {
- 'plotBackgroundColor': '#FFFFFF',
- 'borderColor': '#528ec5',
- 'zoomType': 'x',
- 'panning': true,
- 'panKey': 'shift',
- 'export_menu_enabled': false,
- 'legend_enabled': false
- },
- 'xAxis': {
- 'title_enabled': true,
- 'title_text': null,
- 'title_text_default_READONLY': 'Values', //copied into title_text when re-enabling title from disabled state; user will be expected to change title_text
- 'title_color': "#707070",
- 'title_font_size': 12, //in pixels
- 'min': null,
- 'max': null,
- 'gridLine_enabled': false,
- 'gridLineColor': '#999999',
- 'gridLineWidth': 0,
- 'gridLineWidth_default_READONLY': 1, //copied into gridLineWidth when re-enabling grid lines from disabled state
- 'tickInterval': null,
- 'labels_enabled': true,
- 'labels_step': null,
- 'labels_staggerLines': null,
- 'axis_enabled': true
- },
- 'yAxis': {
- 'title_enabled': true,
- 'title_text': null,
- 'title_text_default_READONLY': 'Values', //copied into title_text when re-enabling title from disabled state; user will be expected to change title_text
- 'title_color': "#707070",
- 'title_font_size': 12, //in pixels
- 'min': null,
- 'max': null,
- 'gridLine_enabled': true,
- 'gridLineColor': '#999999',
- 'gridLineWidth': 1,
- 'gridLineWidth_default_READONLY': 1, //copied into gridLineWidth when re-enabling grid lines from disabled state
- 'tickInterval': null,
- 'labels_enabled': true,
- 'labels_step': null,
- 'axis_enabled': true
- },
- 'line': {
- 'lineColor': DEFAULT_COLOR,
- 'colors': DEFAULT_COLOR_HARMONY,
- 'lineWidth': 2,
- 'step': false,
- 'marker_enabled': true,
- 'marker_fillColor': '#528ec5',
- 'marker_lineColor': '#FFFFFF',
- 'marker_radius': 2,
- 'xAxis_column': null,
- 'yAxis_columns': []
- },
- 'area': {
- 'fillColor': DEFAULT_COLOR,
- 'fillOpacity': 0.75
- },
- 'pie': {
- 'legend_enabled': true,
- 'dataLabels_enabled': false,
- 'dataLabels_color': '#777',
- 'connectorColor': '#999',
- 'colors': EXPANDED_COLOR_HARMONY
- },
- 'bar': {
- 'colors': DEFAULT_COLOR_HARMONY,
- 'color': DEFAULT_COLOR
- },
- 'map': {
- 'latitude_source_table_field_id': null,
- 'longitude_source_table_field_id': null,
- 'latitude_dataset_col_index': null,
- 'longitude_dataset_col_index': null,
- 'zoom': 10,
- 'center_latitude': 37.7577, //defaults to SF ;-)
- 'center_longitude': -122.4376
- }
-};
+import { getCardColors, getFriendlyName } from "metabase/visualizations/lib/utils";
-var groupsForVisualizations = {
- 'scalar': ['global'],
- 'table': ['global', 'columns'],
- 'pie': ['global', 'chart', 'pie'],
- 'bar': ['global', 'columns', 'chart', 'xAxis', 'yAxis', 'bar'],
- 'line': ['global', 'columns', 'chart', 'xAxis', 'yAxis', 'line'],
- 'area': ['global', 'columns', 'chart', 'xAxis', 'yAxis', 'line', 'area'],
- 'country': ['global', 'columns', 'chart', 'map'],
- 'state': ['global', 'columns', 'chart', 'map'],
- 'pin_map': ['global', 'columns', 'chart', 'map']
-};
+import ChartSettingInput from "metabase/visualizations/components/settings/ChartSettingInput.jsx";
+import ChartSettingInputNumeric from "metabase/visualizations/components/settings/ChartSettingInputNumeric.jsx";
+import ChartSettingSelect from "metabase/visualizations/components/settings/ChartSettingSelect.jsx";
+import ChartSettingToggle from "metabase/visualizations/components/settings/ChartSettingToggle.jsx";
+import ChartSettingFieldsPicker from "metabase/visualizations/components/settings/ChartSettingFieldsPicker.jsx";
+import ChartSettingColorsPicker from "metabase/visualizations/components/settings/ChartSettingColorsPicker.jsx";
+import ChartSettingOrderedFields from "metabase/visualizations/components/settings/ChartSettingOrderedFields.jsx";
-export function getDefaultColor() {
- return DEFAULT_COLOR;
+function columnsAreValid(colNames, data, filter = () => true) {
+ if (typeof colNames === "string") {
+ colNames = [colNames]
+ }
+ if (!data || !Array.isArray(colNames)) {
+ return false;
+ }
+ const colsByName = {};
+ for (const col of data.cols) {
+ colsByName[col.name] = col;
+ }
+ return colNames.reduce((acc, name) =>
+ acc && (name == undefined || (colsByName[name] && filter(colsByName[name])))
+ , true);
}
-export function getDefaultColorHarmony() {
- return DEFAULT_COLOR_HARMONY;
+function getSeriesTitles([{ data: { rows, cols } }], vizSettings) {
+ const seriesDimension = vizSettings["graph.dimensions"][1];
+ if (seriesDimension != null) {
+ let seriesIndex = _.findIndex(cols, (col) => col.name === seriesDimension);
+ return crossfilter(rows).dimension(d => d[seriesIndex]).group().all().map(v => v.key);
+ } else {
+ return vizSettings["graph.metrics"].map(name => {
+ let col = _.findWhere(cols, { name });
+ return col && getFriendlyName(col);
+ });
+ }
}
-function getSettingsForGroup(dbSettings, groupName) {
- if (typeof dbSettings != "object") {
- dbSettings = {};
+function getDefaultDimensionsAndMetrics([{ data: { cols, rows } }]) {
+ let type = getChartTypeFromData(cols, rows, false);
+ switch (type) {
+ case DIMENSION_DIMENSION_METRIC:
+ let dimensions = [cols[0], cols[1]];
+ if (isDate(dimensions[1]) && !isDate(dimensions[0])) {
+ // if the series dimension is a date but the axis dimension is not then swap them
+ dimensions.reverse();
+ } else if (dimensions[1].cardinality > dimensions[0].cardinality) {
+ // if the series dimension is higher cardinality than the axis dimension then swap them
+ dimensions.reverse();
+ }
+ return {
+ dimensions: dimensions.map(col => col.name),
+ metrics: [cols[2].name]
+ };
+ case DIMENSION_METRIC:
+ return {
+ dimensions: [cols[0].name],
+ metrics: [cols[1].name]
+ };
+ case DIMENSION_METRIC_METRIC:
+ return {
+ dimensions: [cols[0].name],
+ metrics: cols.slice(1).map(col => col.name)
+ };
+ default:
+ return {
+ dimensions: [null],
+ metrics: [null]
+ };
}
+}
- if (typeof settings[groupName] == "undefined") {
- return dbSettings;
+function getDefaultDimensionAndMetric([{ data: { cols, rows } }]) {
+ const type = getChartTypeFromData(cols, rows, false);
+ if (type === DIMENSION_METRIC) {
+ return {
+ dimension: cols[0].name,
+ metric: cols[1].name
+ };
+ } else {
+ return {
+ dimension: null,
+ metric: null
+ };
}
+}
+
+function getOptionFromColumn(col) {
+ return {
+ name: getFriendlyName(col),
+ value: col.name
+ };
+}
- if (typeof dbSettings[groupName] == "undefined") {
- dbSettings[groupName] = {};
+// const CURRENCIES = ["afn", "ars", "awg", "aud", "azn", "bsd", "bbd", "byr", "bzd", "bmd", "bob", "bam", "bwp", "bgn", "brl", "bnd", "khr", "cad", "kyd", "clp", "cny", "cop", "crc", "hrk", "cup", "czk", "dkk", "dop", "xcd", "egp", "svc", "eek", "eur", "fkp", "fjd", "ghc", "gip", "gtq", "ggp", "gyd", "hnl", "hkd", "huf", "isk", "inr", "idr", "irr", "imp", "ils", "jmd", "jpy", "jep", "kes", "kzt", "kpw", "krw", "kgs", "lak", "lvl", "lbp", "lrd", "ltl", "mkd", "myr", "mur", "mxn", "mnt", "mzn", "nad", "npr", "ang", "nzd", "nio", "ngn", "nok", "omr", "pkr", "pab", "pyg", "pen", "php", "pln", "qar", "ron", "rub", "shp", "sar", "rsd", "scr", "sgd", "sbd", "sos", "zar", "lkr", "sek", "chf", "srd", "syp", "tzs", "twd", "thb", "ttd", "try", "trl", "tvd", "ugx", "uah", "gbp", "usd", "uyu", "uzs", "vef", "vnd", "yer", "zwd"];
+
+const SETTINGS = {
+ "graph.dimensions": {
+ section: "Data",
+ title: "X-axis",
+ widget: ChartSettingFieldsPicker,
+ isValid: ([{ card, data }], vizSettings) =>
+ columnsAreValid(card.visualization_settings["graph.dimensions"], data, isDimension) &&
+ columnsAreValid(card.visualization_settings["graph.metrics"], data, isMetric),
+ getDefault: (series, vizSettings) =>
+ getDefaultDimensionsAndMetrics(series).dimensions,
+ getProps: ([{ card, data }], vizSettings) => {
+ const value = vizSettings["graph.dimensions"];
+ const options = data.cols.filter(isDimension).map(getOptionFromColumn);
+ return {
+ options,
+ addAnother: (options.length > value.length && value.length < 2) ? "Add a series breakout..." : null
+ };
+ },
+ writeDependencies: ["graph.metrics"]
+ },
+ "graph.metrics": {
+ section: "Data",
+ title: "Y-axis",
+ widget: ChartSettingFieldsPicker,
+ isValid: ([{ card, data }], vizSettings) =>
+ columnsAreValid(card.visualization_settings["graph.dimensions"], data, isDimension) &&
+ columnsAreValid(card.visualization_settings["graph.metrics"], data, isMetric),
+ getDefault: (series, vizSettings) =>
+ getDefaultDimensionsAndMetrics(series).metrics,
+ getProps: ([{ card, data }], vizSettings) => {
+ const value = vizSettings["graph.dimensions"];
+ const options = data.cols.filter(isMetric).map(getOptionFromColumn);
+ return {
+ options,
+ addAnother: options.length > value.length ? "Add another series..." : null
+ };
+ },
+ writeDependencies: ["graph.dimensions"]
+ },
+ "line.interpolate": {
+ section: "Display",
+ title: "Style",
+ widget: ChartSettingSelect,
+ props: {
+ options: [
+ { name: "Line", value: "linear" },
+ { name: "Curve", value: "cardinal" },
+ { name: "Step", value: "step-after" },
+ ]
+ },
+ getDefault: () => "linear"
+ },
+ "line.marker_enabled": {
+ section: "Display",
+ title: "Show point markers on lines",
+ widget: ChartSettingToggle
+ },
+ "stackable.stacked": {
+ section: "Display",
+ title: "Stacked",
+ widget: ChartSettingToggle,
+ readDependencies: ["graph.metrics"],
+ getDefault: ([{ card, data }], vizSettings) => (
+ // area charts should usually be stacked
+ card.display === "area" ||
+ // legacy default for D-M-M+ charts
+ (card.display === "area" && vizSettings["graph.metrics"].length > 1)
+ )
+ },
+ "graph.colors": {
+ section: "Display",
+ widget: ChartSettingColorsPicker,
+ readDependencies: ["graph.dimensions", "graph.metrics"],
+ getDefault: ([{ card, data }], vizSettings) => {
+ return getCardColors(card);
+ },
+ getProps: (series, vizSettings) => {
+ return { seriesTitles: getSeriesTitles(series, vizSettings) };
+ }
+ },
+ "graph.x_axis.axis_enabled": {
+ section: "Axes",
+ title: "Show x-axis line and marks",
+ widget: ChartSettingToggle,
+ default: true
+ },
+ "graph.y_axis.axis_enabled": {
+ section: "Axes",
+ title: "Show y-axis line and marks",
+ widget: ChartSettingToggle,
+ default: true
+ },
+ "graph.y_axis.auto_range": {
+ section: "Axes",
+ title: "Auto y-axis range",
+ widget: ChartSettingToggle,
+ default: true
+ },
+ "graph.y_axis.min": {
+ section: "Axes",
+ title: "Min",
+ widget: ChartSettingInputNumeric,
+ default: 0,
+ getHidden: (series, vizSettings) => vizSettings["graph.y_axis.auto_range"] !== false
+ },
+ "graph.y_axis.max": {
+ section: "Axes",
+ title: "Max",
+ widget: ChartSettingInputNumeric,
+ default: 100,
+ getHidden: (series, vizSettings) => vizSettings["graph.y_axis.auto_range"] !== false
+ },
+/*
+ "graph.y_axis_right.auto_range": {
+ section: "Axes",
+ title: "Auto right-hand y-axis range",
+ widget: ChartSettingToggle,
+ default: true
+ },
+ "graph.y_axis_right.min": {
+ section: "Axes",
+ title: "Min",
+ widget: ChartSettingInputNumeric,
+ default: 0,
+ getHidden: (series, vizSettings) => vizSettings["graph.y_axis_right.auto_range"] !== false
+ },
+ "graph.y_axis_right.max": {
+ section: "Axes",
+ title: "Max",
+ widget: ChartSettingInputNumeric,
+ default: 100,
+ getHidden: (series, vizSettings) => vizSettings["graph.y_axis_right.auto_range"] !== false
+ },
+*/
+ "graph.y_axis.auto_split": {
+ section: "Axes",
+ title: "Use a split y-axis when necessary",
+ widget: ChartSettingToggle,
+ default: true
+ },
+ "graph.x_axis.labels_enabled": {
+ section: "Labels",
+ title: "Show label on x-axis",
+ widget: ChartSettingToggle,
+ default: true
+ },
+ "graph.x_axis.title_text": {
+ section: "Labels",
+ title: "X-axis label",
+ widget: ChartSettingInput,
+ getHidden: (series, vizSettings) => vizSettings["graph.x_axis.labels_enabled"] === false
+ },
+ "graph.y_axis.labels_enabled": {
+ section: "Labels",
+ title: "Show label on y-axis",
+ widget: ChartSettingToggle,
+ default: true
+ },
+ "graph.y_axis.title_text": {
+ section: "Labels",
+ title: "Y-axis label",
+ widget: ChartSettingInput,
+ getHidden: (series, vizSettings) => vizSettings["graph.y_axis.labels_enabled"] === false
+ },
+ "pie.dimension": {
+ section: "Data",
+ title: "Measure",
+ widget: ChartSettingSelect,
+ isValid: ([{ card, data }], vizSettings) =>
+ columnsAreValid(card.visualization_settings["pie.dimension"], data, isDimension),
+ getDefault: (series, vizSettings) =>
+ getDefaultDimensionAndMetric(series).dimension,
+ getProps: ([{ card, data: { cols }}]) => ({
+ options: cols.filter(isDimension).map(getOptionFromColumn)
+ }),
+ },
+ "pie.metric": {
+ section: "Data",
+ title: "Slice by",
+ widget: ChartSettingSelect,
+ isValid: ([{ card, data }], vizSettings) =>
+ columnsAreValid(card.visualization_settings["pie.metric"], data, isMetric),
+ getDefault: (series, vizSettings) =>
+ getDefaultDimensionAndMetric(series).metric,
+ getProps: ([{ card, data: { cols }}]) => ({
+ options: cols.filter(isMetric).map(getOptionFromColumn)
+ }),
+ },
+ "pie.show_legend": {
+ section: "Legend",
+ title: "Show legend",
+ widget: ChartSettingToggle
+ },
+ "pie.show_legend_perecent": {
+ section: "Legend",
+ title: "Show percentages in legend",
+ widget: ChartSettingToggle,
+ default: true
+ },
+ "scalar.locale": {
+ title: "Separator style",
+ widget: ChartSettingSelect,
+ props: {
+ options: [
+ { name: "100000.00", value: null },
+ { name: "100,000.00", value: "en" },
+ { name: "100 000,00", value: "fr" },
+ { name: "100.000,00", value: "de" }
+ ]
+ },
+ default: "en"
+ },
+ // "scalar.currency": {
+ // title: "Currency",
+ // widget: ChartSettingSelect,
+ // props: {
+ // options: [{ name: "None", value: null}].concat(CURRENCIES.map(currency => ({
+ // name: currency.toUpperCase(),
+ // value: currency
+ // })))
+ // },
+ // default: null
+ // },
+ "scalar.decimals": {
+ title: "Number of decimal places",
+ widget: ChartSettingInputNumeric
+ },
+ "scalar.prefix": {
+ title: "Add a prefix",
+ widget: ChartSettingInput
+ },
+ "scalar.suffix": {
+ title: "Add a suffix",
+ widget: ChartSettingInput
+ },
+ "scalar.scale": {
+ title: "Multiply by a number",
+ widget: ChartSettingInputNumeric
+ },
+ "table.pivot": {
+ title: "Pivot the table",
+ widget: ChartSettingToggle,
+ getHidden: ([{ card, data }]) => (
+ data && data.cols.length !== 3
+ ),
+ getDefault: ([{ card, data }]) => (
+ (data && data.cols.length === 3) &&
+ Query.isStructured(card.dataset_query) &&
+ !Query.isBareRowsAggregation(card.dataset_query.query)
+ )
+ },
+ "table.columns": {
+ title: "Fields to include",
+ widget: ChartSettingOrderedFields,
+ getHidden: (series, vizSettings) => vizSettings["table.pivot"],
+ isValid: ([{ card, data }]) =>
+ card.visualization_settings["table.columns"] &&
+ columnsAreValid(card.visualization_settings["table.columns"].map(x => x.name), data),
+ getDefault: ([{ data: { cols }}]) => cols.map(col => ({
+ name: col.name,
+ enabled: true
+ })),
+ getProps: ([{ data: { cols }}]) => ({
+ columnNames: cols.reduce((o, col) => ({ ...o, [col.name]: getFriendlyName(col)}), {})
+ })
+ },
+ "map.type": {
+ title: "Map type",
+ widget: ChartSettingSelect,
+ props: {
+ options: [
+ { name: "Pin map", value: "pin" },
+ { name: "Region map", value: "region" }
+ ]
+ },
+ getDefault: ([{ card, data: { cols } }]) => {
+ switch (card.display) {
+ case "state":
+ case "country":
+ return "region";
+ case "pin_map":
+ return "pin";
+ default:
+ if (hasLatitudeAndLongitudeColumns(cols)) {
+ return "pin";
+ } else {
+ return "region";
+ }
+ }
+ }
+ },
+ "map.latitude_column": {
+ title: "Latitude field",
+ widget: ChartSettingSelect,
+ getDefault: ([{ card, data: { cols }}]) =>
+ (_.findWhere(cols, { special_type: "latitude" }) || {}).name,
+ getProps: ([{ card, data: { cols }}]) => ({
+ options: cols.filter(isNumeric).map(getOptionFromColumn)
+ }),
+ getHidden: (series, vizSettings) => vizSettings["map.type"] !== "pin"
+ },
+ "map.longitude_column": {
+ title: "Longitude field",
+ widget: ChartSettingSelect,
+ getDefault: ([{ card, data: { cols }}]) =>
+ (_.findWhere(cols, { special_type: "longitude" }) || {}).name,
+ getProps: ([{ card, data: { cols }}]) => ({
+ options: cols.filter(isNumeric).map(getOptionFromColumn)
+ }),
+ getHidden: (series, vizSettings) => vizSettings["map.type"] !== "pin"
+ },
+ "map.region": {
+ title: "Region map",
+ widget: ChartSettingSelect,
+ getDefault: ([{ card, data: { cols }}]) => {
+ switch (card.display) {
+ case "country":
+ return "world_countries";
+ case "state":
+ default:
+ return "us_states";
+ }
+ },
+ props: {
+ options: [
+ { name: "United States", value: "us_states" },
+ { name: "World", value: "world_countries" },
+ ]
+ },
+ getHidden: (series, vizSettings) => vizSettings["map.type"] !== "region"
+ },
+ "map.metric": {
+ title: "Metric field",
+ widget: ChartSettingSelect,
+ isValid: ([{ card, data }], vizSettings) =>
+ card.visualization_settings["map.metric"] &&
+ columnsAreValid(card.visualization_settings["map.metric"], data, isMetric),
+ getDefault: (series, vizSettings) =>
+ getDefaultDimensionAndMetric(series).metric,
+ getProps: ([{ card, data: { cols }}]) => ({
+ options: cols.filter(isMetric).map(getOptionFromColumn)
+ }),
+ getHidden: (series, vizSettings) => vizSettings["map.type"] !== "region"
+ },
+ "map.dimension": {
+ title: "Region field",
+ widget: ChartSettingSelect,
+ isValid: ([{ card, data }], vizSettings) =>
+ card.visualization_settings["map.dimension"] &&
+ columnsAreValid(card.visualization_settings["map.dimension"], data, isDimension),
+ getDefault: (series, vizSettings) =>
+ getDefaultDimensionAndMetric(series).dimension,
+ getProps: ([{ card, data: { cols }}]) => ({
+ options: cols.filter(isDimension).map(getOptionFromColumn)
+ }),
+ getHidden: (series, vizSettings) => vizSettings["map.type"] !== "region"
+ },
+ // TODO: translate legacy settings
+ "map.zoom": {
+ default: 9
+ },
+ "map.center_latitude": {
+ default: 37.7577 //defaults to SF ;-)
+ },
+ "map.center_longitude": {
+ default: -122.4376
}
- //make a deep copy of default settings, otherwise default settings that are objects
- //will not be recognized as 'dirty' after changing the value in the UI, because
- //_.defaults make a shallow copy, so objects / arrays are copied by reference,
- //so changing the settings in the UI would change the default settings.
- var newSettings = _.defaults(dbSettings[groupName], angular.copy(settings[groupName]));
+};
- return newSettings;
+const SETTINGS_PREFIXES_BY_CHART_TYPE = {
+ line: ["graph.", "line."],
+ area: ["graph.", "line.", "stackable."],
+ bar: ["graph.", "stackable."],
+ pie: ["pie."],
+ scalar: ["scalar."],
+ table: ["table."],
+ map: ["map."]
}
-function getSettingsForGroups(dbSettings, groups) {
- var newSettings = {};
- for (var i = 0; i < groups.length; i++) {
- var groupName = groups[i];
- newSettings[groupName] = getSettingsForGroup(dbSettings, groupName);
- }
- return newSettings;
+// alias legacy map types
+for (const type of ["state", "country", "pin_map"]) {
+ SETTINGS_PREFIXES_BY_CHART_TYPE[type] = SETTINGS_PREFIXES_BY_CHART_TYPE["map"];
}
-function getSettingsGroupsForVisualization(visualization) {
- var groups = ['global'];
- if (typeof groupsForVisualizations[visualization] != "undefined") {
- groups = groupsForVisualizations[visualization];
+function getSetting(id, vizSettings, series) {
+ if (id in vizSettings) {
+ return;
}
- return groups;
-}
-export function getSettingsForVisualization(dbSettings, visualization) {
- var settings = angular.copy(dbSettings);
- var groups = _.union(_.keys(settings), getSettingsGroupsForVisualization(visualization));
- return getSettingsForGroups(settings, groups);
-}
+ const settingDef = SETTINGS[id];
+ const [{ card }] = series;
+
+ for (let dependentId of settingDef.readDependencies || []) {
+ getSetting(dependentId, vizSettings, series);
+ }
-export function setLatitudeAndLongitude(settings, columnDefs) {
- // latitude
- var latitudeColumn,
- latitudeColumnIndex;
- columnDefs.forEach(function(col, index) {
- if (col.special_type &&
- col.special_type === "latitude" &&
- latitudeColumn === undefined) {
- latitudeColumn = col;
- latitudeColumnIndex = index;
+ try {
+ if (settingDef.getValue) {
+ return vizSettings[id] = settingDef.getValue(series, vizSettings);
}
- });
-
- // longitude
- var longitudeColumn,
- longitudeColumnIndex;
- columnDefs.forEach(function(col, index) {
- if (col.special_type &&
- col.special_type === "longitude" &&
- longitudeColumn === undefined) {
- longitudeColumn = col;
- longitudeColumnIndex = index;
+
+ if (card.visualization_settings[id] !== undefined) {
+ if (!settingDef.isValid || settingDef.isValid(series, vizSettings)) {
+ return vizSettings[id] = card.visualization_settings[id];
+ }
+ }
+
+ if (settingDef.getDefault) {
+ return vizSettings[id] = settingDef.getDefault(series, vizSettings);
}
- });
- if (latitudeColumn && longitudeColumn) {
- var settingsWithLatAndLon = angular.copy(settings);
+ if ("default" in settingDef) {
+ return vizSettings[id] = settingDef.default;
+ }
+ } catch (e) {
+ console.error("Error getting setting", id, e);
+ }
+ return vizSettings[id] = undefined;
+}
- settingsWithLatAndLon.map.latitude_source_table_field_id = latitudeColumn.id;
- settingsWithLatAndLon.map.latitude_dataset_col_index = latitudeColumnIndex;
- settingsWithLatAndLon.map.longitude_source_table_field_id = longitudeColumn.id;
- settingsWithLatAndLon.map.longitude_dataset_col_index = longitudeColumnIndex;
+function getSettingIdsForSeries(series) {
+ const [{ card }] = series;
+ const prefixes = SETTINGS_PREFIXES_BY_CHART_TYPE[card.display] || [];
+ return Object.keys(SETTINGS).filter(id => _.any(prefixes, (p) => id.startsWith(p)))
+}
- return settingsWithLatAndLon;
- } else {
- return settings;
+export function getSettings(series) {
+ let vizSettings = {};
+ for (let id of getSettingIdsForSeries(series)) {
+ getSetting(id, vizSettings, series);
}
+ return vizSettings;
+}
+
+function getSettingWidget(id, vizSettings, series, onChangeSettings) {
+ const settingDef = SETTINGS[id];
+ const value = vizSettings[id];
+ return {
+ ...settingDef,
+ id: id,
+ value: value,
+ hidden: settingDef.getHidden ? settingDef.getHidden(series, vizSettings) : false,
+ disabled: settingDef.getDisabled ? settingDef.getDisabled(series, vizSettings) : false,
+ props: {
+ ...(settingDef.props ? settingDef.props : {}),
+ ...(settingDef.getProps ? settingDef.getProps(series, vizSettings) : {})
+ },
+ onChange: (value) => {
+ const newSettings = { [id]: value };
+ for (const id of (settingDef.writeDependencies || [])) {
+ newSettings[id] = vizSettings[id];
+ }
+ onChangeSettings(newSettings)
+ }
+ };
+}
+
+export function getSettingsWidgets(series, onChangeSettings) {
+ const vizSettings = getSettings(series);
+ return getSettingIdsForSeries(series).map(id =>
+ getSettingWidget(id, vizSettings, series, onChangeSettings)
+ );
}
diff --git a/frontend/src/metabase/meta/metadata/demo.js b/frontend/src/metabase/meta/metadata/demo.js
deleted file mode 100644
index 9674461883dac9fb21df01c3b742f811253ae437..0000000000000000000000000000000000000000
--- a/frontend/src/metabase/meta/metadata/demo.js
+++ /dev/null
@@ -1,32 +0,0 @@
-/* @flow */
-
-import Metadata from "./Metadata";
-import Database from "./Database";
-
-async function getDatabases() {
- let response = await fetch("/api/database?include_tables=true", { credentials: 'same-origin' });
- return await response.json();
-}
-
-async function getTable(table) {
- let response = await fetch("/api/table/" + table.id + "/query_metadata", { credentials: 'same-origin' });
- return await response.json();
-}
-
-async function loadDatabaseTables(database) {
- database.tables = await Promise.all(database.tables.map(getTable));
-}
-
-async function loadMetadata() {
- let databases = await getDatabases();
- await Promise.all(databases.map(loadDatabaseTables));
- return databases;
-}
-
-loadMetadata().then((databases) => {
- window.m = new Metadata(databases);
- window.d = new Database(databases[0]);
- console.log(window.m.databases());
- console.log(window.m.databases()[1].tables()[0].field(1835).target().table().database().tables()[0].fields()[0].isNumeric());
- console.log(window.d.tables());
-}).then(undefined, (err) => console.error(err))
diff --git a/frontend/src/metabase/meta/types/Card.js b/frontend/src/metabase/meta/types/Card.js
index 457c2f97c4f7ccbe2ef85df6e033cec7df3f94bf..94859cc4a6ec1b22429dea7a6a6670f41978a35e 100644
--- a/frontend/src/metabase/meta/types/Card.js
+++ b/frontend/src/metabase/meta/types/Card.js
@@ -5,9 +5,13 @@ import type { StructuredQueryObject, NativeQueryObject } from "./Query";
export type CardId = number;
+export type VisualizationSettings = { [key: string]: any }
+
export type CardObject = {
id: CardId,
- dataset_query: DatasetQueryObject
+ dataset_query: DatasetQueryObject,
+ display: string,
+ visualization_settings: VisualizationSettings
};
export type StructuredDatasetQueryObject = {
diff --git a/frontend/src/metabase/query_builder/VisualizationSettings.jsx b/frontend/src/metabase/query_builder/VisualizationSettings.jsx
index fc16d109b1b835a47cdf46d2d51d8ade04387385..1998c2ea3f665956c8c0c607954d9da017c00b0c 100644
--- a/frontend/src/metabase/query_builder/VisualizationSettings.jsx
+++ b/frontend/src/metabase/query_builder/VisualizationSettings.jsx
@@ -2,6 +2,9 @@ import React, { Component, PropTypes } from "react";
import Icon from "metabase/components/Icon.jsx";
import PopoverWithTrigger from "metabase/components/PopoverWithTrigger.jsx";
+import ModalWithTrigger from "metabase/components/ModalWithTrigger.jsx";
+
+import ChartSettings from "metabase/visualizations/components/ChartSettings.jsx";
import visualizations from "metabase/visualizations";
@@ -10,7 +13,6 @@ import cx from "classnames";
export default class VisualizationSettings extends React.Component {
constructor(props, context) {
super(props, context);
- this.setDisplay = this.setDisplay.bind(this);
}
static propTypes = {
@@ -21,7 +23,7 @@ export default class VisualizationSettings extends React.Component {
onUpdateVisualizationSettings: PropTypes.func.isRequired
};
- setDisplay(type) {
+ setDisplay = (type) => {
// notify our parent about our change
this.props.setDisplayFn(type);
this.refs.displayPopover.toggle();
@@ -88,6 +90,16 @@ export default class VisualizationSettings extends React.Component {
return (
<div className="VisualizationSettings flex align-center">
{this.renderChartTypePicker()}
+ <ModalWithTrigger
+ className="Modal Modal--wide Modal--tall"
+ triggerElement={<Icon name="gear" />}
+ triggerClasses="text-brand-hover"
+ >
+ <ChartSettings
+ series={[{ card: this.props.card, data: this.props.result.data }]}
+ onChange={this.props.onUpdateVisualizationSettings}
+ />
+ </ModalWithTrigger>
{this.renderVisualizationSettings()}
</div>
);
diff --git a/frontend/src/metabase/query_builder/actions.js b/frontend/src/metabase/query_builder/actions.js
index 81c97c3ad7eacf955789eb5459b01c7b42baaa34..e00f8178e7fa8cbb2a4cbf0d23b33194c71fc520 100644
--- a/frontend/src/metabase/query_builder/actions.js
+++ b/frontend/src/metabase/query_builder/actions.js
@@ -759,9 +759,7 @@ export const queryCompleted = createThunkAction(QUERY_COMPLETED, (card, queryRes
// any time we were a scalar and now have more than 1x1 data switch to table view
cardDisplay = "table";
- } else if (Query.isStructured(card.dataset_query) &&
- Query.isBareRowsAggregation(card.dataset_query.query) &&
- card.display !== "pin_map") {
+ } else if (!card.display) {
// if our query aggregation is "rows" then ALWAYS set the display to "table"
cardDisplay = "table";
}
diff --git a/frontend/src/metabase/query_builder/template_tags/TagValuePicker.jsx b/frontend/src/metabase/query_builder/template_tags/TagValuePicker.jsx
deleted file mode 100644
index 9ea8dbf6d7df559d201638aa5dbb9fb3da90771d..0000000000000000000000000000000000000000
--- a/frontend/src/metabase/query_builder/template_tags/TagValuePicker.jsx
+++ /dev/null
@@ -1,113 +0,0 @@
-import React, { Component, PropTypes } from 'react';
-import cx from "classnames";
-
-import Icon from "metabase/components/Icon.jsx";
-import PopoverWithTrigger from "metabase/components/PopoverWithTrigger.jsx";
-
-// TODO: since these are shared we should probably find somewhere else to keep them
-import DateMonthYearWidget from "metabase/dashboard/components/parameters/widgets/DateMonthYearWidget.jsx";
-import DateQuarterYearWidget from "metabase/dashboard/components/parameters/widgets/DateQuarterYearWidget.jsx";
-import DateRangeWidget from "metabase/dashboard/components/parameters/widgets/DateRangeWidget.jsx";
-import DateRelativeWidget from "metabase/dashboard/components/parameters/widgets/DateRelativeWidget.jsx";
-import DateSingleWidget from "metabase/dashboard/components/parameters/widgets/DateSingleWidget.jsx";
-import CategoryWidget from "metabase/dashboard/components/parameters/widgets/CategoryWidget.jsx";
-import TextWidget from "metabase/dashboard/components/parameters/widgets/TextWidget.jsx";
-
-
-export default class TagValuePicker extends Component {
-
- static propTypes = {
- parameter: PropTypes.object.isRequired,
- value: PropTypes.any,
- values: PropTypes.array,
- setValue: PropTypes.func.isRequired
- };
-
- static defaultProps = {
- value: null,
- values: []
- };
-
- determinePickerComponent(type, numValues) {
- switch(type) {
- case null: return UnknownWidget;
- case "date/month-year": return DateMonthYearWidget;
- case "date/quarter-year": return DateQuarterYearWidget;
- case "date/range": return DateRangeWidget;
- case "date/relative": return DateRelativeWidget;
- case "date/single": return DateSingleWidget;
- default: if (numValues > 0) {
- return CategoryWidget;
- } else {
- return TextWidget;
- }
- }
- }
-
- render() {
- const { parameter, setValue, value, values } = this.props;
- const hasValue = value != null;
- const placeholder = "Select…";
-
- // determine the correct Picker to render based on the parameter data type
- const PickerComponent = this.determinePickerComponent(parameter.type, values.length);
-
- if (PickerComponent.noPopover) {
- let classNames = cx("px1 flex align-center bordered border-med rounded TagValuePickerNoPopover", {
- "text-bold": hasValue,
- "text-grey-4": !hasValue,
- "text-brand": hasValue,
- "border-brand": hasValue,
- "TagValuePickerNoPopover--selected": hasValue
- });
- return (
- <div style={{paddingTop: "0.25rem", paddingBottom: "0.25rem"}} className={classNames}>
- <PickerComponent value={value} values={values} setValue={setValue} />
- { hasValue &&
- <Icon name="close" className="flex-align-right cursor-pointer" onClick={(e) => {
- if (hasValue) {
- e.stopPropagation();
- setValue(null);
- }
- }} />
- }
- </div>
- );
- }
-
- let classNames = cx("p1 flex align-center bordered border-med rounded", {
- "text-bold": hasValue,
- "text-grey-4": !hasValue,
- "text-brand": hasValue,
- "border-brand": hasValue
- });
- return (
- <PopoverWithTrigger
- ref="valuePopover"
- triggerElement={
- <div ref="trigger" style={{minHeight: 36, minWidth: 150}} className={classNames}>
- <div className="mr1">{ hasValue ? PickerComponent.format(value) : placeholder }</div>
- <Icon name={hasValue ? "close" : "chevrondown"} className="flex-align-right" onClick={(e) => {
- if (hasValue) {
- e.stopPropagation();
- setValue(null);
- }
- }}/>
- </div>
- }
- target={() => this.refs.trigger} // not sure why this is necessary
- >
- <PickerComponent
- value={value}
- values={values}
- setValue={setValue}
- onClose={() => this.refs.valuePopover.close()}
- />
- </PopoverWithTrigger>
- );
- }
-}
-
-const UnknownWidget = () =>
- <input type="text" value="No type chosen" disabled={true} />
-UnknownWidget.noPopover = true;
diff --git a/frontend/src/metabase/vendor.js b/frontend/src/metabase/vendor.js
index 7aa048509781a1cc6c054d23d3cced48b4f74845..afbfd93a6fc1b3aefec8c5a886b8c5e796578752 100644
--- a/frontend/src/metabase/vendor.js
+++ b/frontend/src/metabase/vendor.js
@@ -25,3 +25,5 @@ import 'ace/snippets/mysql';
import 'ace/snippets/pgsql';
import 'ace/snippets/sqlserver';
import 'ace/snippets/json';
+
+import 'number-to-locale-string';
diff --git a/frontend/src/metabase/visualizations/Map.jsx b/frontend/src/metabase/visualizations/Map.jsx
new file mode 100644
index 0000000000000000000000000000000000000000..1fa4d557f498a03856c3435494f7e9e1ae77df32
--- /dev/null
+++ b/frontend/src/metabase/visualizations/Map.jsx
@@ -0,0 +1,42 @@
+import React, { Component, PropTypes } from "react";
+
+import ChoroplethMap from "./components/ChoroplethMap.jsx";
+import PinMap from "./PinMap.jsx";
+
+import { ChartSettingsError } from "metabase/visualizations/lib/errors";
+
+export default class Map extends Component {
+ static displayName = "Map";
+ static identifier = "map";
+ static iconName = "pinmap";
+
+ static aliases = ["state", "country", "pin_map"];
+
+ static minSize = { width: 4, height: 4 };
+
+ static isSensible(cols, rows) {
+ return true;
+ }
+
+ static checkRenderable(cols, rows, settings) {
+ if (settings["map.type"] === "pin") {
+ if (!settings["map.longitude_column"] || !settings["map.latitude_column"]) {
+ throw new ChartSettingsError("Please select longitude and latitude columns in the chart settings.", "Data");
+ }
+ } else if (settings["map.type"] === "region"){
+ if (!settings["map.dimension"] || !settings["map.metric"]) {
+ throw new ChartSettingsError("Please select region and metric columns in the chart settings.", "Data");
+ }
+ }
+ }
+
+ render() {
+ const { settings } = this.props;
+ const type = settings["map.type"];
+ if (type === "pin") {
+ return <PinMap {...this.props} />
+ } else if (type === "region") {
+ return <ChoroplethMap {...this.props} />
+ }
+ }
+}
diff --git a/frontend/src/metabase/visualizations/PieChart.jsx b/frontend/src/metabase/visualizations/PieChart.jsx
index cbdf6ffc1a9fe4dc46be4e2f5070e6a810d1e345..e22d243dedd59cb25d4d735aec420b7a3f3d977b 100644
--- a/frontend/src/metabase/visualizations/PieChart.jsx
+++ b/frontend/src/metabase/visualizations/PieChart.jsx
@@ -5,7 +5,7 @@ import styles from "./PieChart.css";
import ChartTooltip from "./components/ChartTooltip.jsx";
import ChartWithLegend from "./components/ChartWithLegend.jsx";
-import { MinColumnsError } from "metabase/visualizations/lib/errors";
+import { ChartSettingsError } from "metabase/visualizations/lib/errors";
import { getFriendlyName } from "metabase/visualizations/lib/utils";
import { formatValue } from "metabase/lib/formatting";
@@ -35,8 +35,10 @@ export default class PieChart extends Component {
return cols.length === 2;
}
- static checkRenderable(cols, rows) {
- if (cols.length < 2) { throw new MinColumnsError(2, cols.length); }
+ static checkRenderable(cols, rows, settings) {
+ if (!settings["pie.dimension"] || !settings["pie.metric"]) {
+ throw new ChartSettingsError("Please select columns in the chart settings.", "Data");
+ }
}
componentDidUpdate() {
@@ -50,23 +52,26 @@ export default class PieChart extends Component {
}
render() {
- const { series, hovered, onHoverChange, className, gridSize } = this.props;
- const { data } = series[0];
+ const { series, hovered, onHoverChange, className, gridSize, settings } = this.props;
+
+ const [{ data: { cols, rows }}] = series;
+ const dimensionIndex = _.findIndex(cols, (col) => col.name === settings["pie.dimension"]);
+ const metricIndex = _.findIndex(cols, (col) => col.name === settings["pie.metric"]);
- const formatDimension = (dimension, jsx = true) => formatValue(dimension, { column: data.cols[0], jsx, majorWidth: 0 })
- const formatMetric = (metric, jsx = true) => formatValue(metric, { column: data.cols[1], jsx, majorWidth: 0 })
+ const formatDimension = (dimension, jsx = true) => formatValue(dimension, { column: cols[dimensionIndex], jsx, majorWidth: 0 })
+ const formatMetric = (metric, jsx = true) => formatValue(metric, { column: cols[metricIndex], jsx, majorWidth: 0 })
const formatPercent = (percent) => (100 * percent).toFixed(2) + "%"
- let total = data.rows.reduce((sum, row) => sum + row[1], 0);
+ let total = rows.reduce((sum, row) => sum + row[metricIndex], 0);
// use standard colors for up to 5 values otherwise use color harmony to help differentiate slices
- let sliceColors = Object.values(data.rows.length > 5 ? colors.harmony : colors.normal);
+ let sliceColors = Object.values(rows.length > 5 ? colors.harmony : colors.normal);
- let [slices, others] = _.chain(data.rows)
- .map(([key, value], index) => ({
- key,
- value,
- percentage: value / total,
+ let [slices, others] = _.chain(rows)
+ .map((row, index) => ({
+ key: row[dimensionIndex],
+ value: row[metricIndex],
+ percentage: row[metricIndex] / total,
color: sliceColors[index % sliceColors.length]
}))
.partition((d) => d.percentage > SLICE_THRESHOLD)
@@ -91,7 +96,7 @@ export default class PieChart extends Component {
let legendTitles = slices.map(slice => [
slice.key === "Other" ? slice.key : formatDimension(slice.key, false),
- formatPercent(slice.percentage)
+ settings["pie.show_legend_perecent"] ? formatPercent(slice.percentage) : undefined
]);
let legendColors = slices.map(slice => slice.color);
@@ -112,8 +117,8 @@ export default class PieChart extends Component {
value: formatMetric(o.value, false)
}))
: [
- { key: getFriendlyName(data.cols[0]), value: formatDimension(slices[index].key) },
- { key: getFriendlyName(data.cols[1]), value: formatMetric(slices[index].value) },
+ { key: getFriendlyName(cols[dimensionIndex]), value: formatDimension(slices[index].key) },
+ { key: getFriendlyName(cols[metricIndex]), value: formatMetric(slices[index].value) },
{ key: "Percentage", value: formatPercent(slices[index].percentage) }
]
});
@@ -133,6 +138,7 @@ export default class PieChart extends Component {
legendTitles={legendTitles} legendColors={legendColors}
gridSize={gridSize}
hovered={hovered} onHoverChange={(d) => onHoverChange && onHoverChange(d && { ...d, ...hoverForIndex(d.index) })}
+ showLegend={settings["pie.show_legend"]}
>
<div className={styles.ChartAndDetail}>
<div ref="detail" className={styles.Detail}>
diff --git a/frontend/src/metabase/visualizations/PinMap.jsx b/frontend/src/metabase/visualizations/PinMap.jsx
index de0b9ec2c2c73a75bb48158f9f548252b9b66ea3..ddb7460caddf9f6c191ada78a73c8fe1a8d882cc 100644
--- a/frontend/src/metabase/visualizations/PinMap.jsx
+++ b/frontend/src/metabase/visualizations/PinMap.jsx
@@ -3,7 +3,6 @@
import React, { Component, PropTypes } from "react";
import ReactDOM from "react-dom";
-import { getSettingsForVisualization, setLatitudeAndLongitude } from "metabase/lib/visualization_settings";
import { hasLatitudeAndLongitudeColumns } from "metabase/lib/schema_metadata";
import { LatitudeLongitudeError } from "metabase/visualizations/lib/errors";
@@ -55,29 +54,29 @@ export default class PinMap extends Component {
this.setState({ zoom });
}
- getTileUrl(settings, coord, zoom) {
- let query = this.props.series[0].card.dataset_query;
+ getLatLongIndexes() {
+ const { settings, series: [{ data: { cols }}] } = this.props;
+ return {
+ latitudeIndex: _.findIndex(cols, (col) => col.name === settings["map.latitude_column"]),
+ longitudeIndex: _.findIndex(cols, (col) => col.name === settings["map.longitude_column"])
+ };
+ }
- let latitude_dataset_col_index = settings.map.latitude_dataset_col_index;
- let longitude_dataset_col_index = settings.map.longitude_dataset_col_index;
- let latitude_source_table_field_id = settings.map.latitude_source_table_field_id;
- let longitude_source_table_field_id = settings.map.longitude_source_table_field_id;
+ getTileUrl = (coord, zoom) => {
+ const [{ card: { dataset_query }, data: { cols }}] = this.props.series;
- if (latitude_dataset_col_index == null || longitude_dataset_col_index == null) {
- return;
- }
+ const { latitudeIndex, longitudeIndex } = this.getLatLongIndexes();
+ const latitudeField = cols[latitudeIndex];
+ const longitudeField = cols[longitudeIndex];
- if (latitude_source_table_field_id == null || longitude_source_table_field_id == null) {
- throw ("Map ERROR: latitude and longitude column indices must be specified");
- }
- if (latitude_dataset_col_index == null || longitude_dataset_col_index == null) {
- throw ("Map ERROR: unable to find specified latitude / longitude columns in source table");
+ if (!latitudeField || !longitudeField) {
+ return;
}
return '/api/tiles/' + zoom + '/' + coord.x + '/' + coord.y + '/' +
- latitude_source_table_field_id + '/' + longitude_source_table_field_id + '/' +
- latitude_dataset_col_index + '/' + longitude_dataset_col_index + '/' +
- '?query=' + encodeURIComponent(JSON.stringify(query))
+ latitudeField.id + '/' + longitudeField.id + '/' +
+ latitudeIndex + '/' + longitudeIndex + '/' +
+ '?query=' + encodeURIComponent(JSON.stringify(dataset_query))
}
componentDidMount() {
@@ -87,31 +86,27 @@ export default class PinMap extends Component {
}
try {
- let element = ReactDOM.findDOMNode(this.refs.map);
-
- let { card, data } = this.props.series[0];
-
- let settings = card.visualization_settings;
-
- settings = getSettingsForVisualization(settings, "pin_map");
- settings = setLatitudeAndLongitude(settings, data.cols);
-
- let mapOptions = {
- zoom: settings.map.zoom,
- center: new google.maps.LatLng(settings.map.center_latitude, settings.map.center_longitude),
+ const element = ReactDOM.findDOMNode(this.refs.map);
+ const { settings, series: [{ data }] } = this.props;
+
+ const mapOptions = {
+ zoom: settings["map.zoom"],
+ center: new google.maps.LatLng(
+ settings["map.center_latitude"],
+ settings["map.center_longitude"]
+ ),
mapTypeId: google.maps.MapTypeId.MAP,
scrollwheel: false
};
- let map = this.map = new google.maps.Map(element, mapOptions);
+ const map = this.map = new google.maps.Map(element, mapOptions);
if (data.rows.length < 2000) {
let tooltip = new google.maps.InfoWindow();
- let latColIndex = settings.map.latitude_dataset_col_index;
- let lonColIndex = settings.map.longitude_dataset_col_index;
+ let { latitudeIndex, longitudeIndex } = this.getLatLongIndexes();
for (let row of data.rows) {
let marker = new google.maps.Marker({
- position: new google.maps.LatLng(row[latColIndex], row[lonColIndex]),
+ position: new google.maps.LatLng(row[latitudeIndex], row[longitudeIndex]),
map: map,
icon: "/app/img/pin.png"
});
@@ -124,7 +119,7 @@ export default class PinMap extends Component {
}
} else {
map.overlayMapTypes.push(new google.maps.ImageMapType({
- getTileUrl: this.getTileUrl.bind(this, settings),
+ getTileUrl: this.getTileUrl,
tileSize: new google.maps.Size(256, 256)
}));
}
diff --git a/frontend/src/metabase/visualizations/Scalar.jsx b/frontend/src/metabase/visualizations/Scalar.jsx
index 8a81ef372ffa7adf1f1649781a6333661700173a..14b89d1d6bbe9918db0db786a6757ed6e177c2cc 100644
--- a/frontend/src/metabase/visualizations/Scalar.jsx
+++ b/frontend/src/metabase/visualizations/Scalar.jsx
@@ -7,9 +7,11 @@ import BarChart from "./BarChart.jsx";
import Urls from "metabase/lib/urls";
import { formatValue } from "metabase/lib/formatting";
import { isSameSeries } from "metabase/visualizations/lib/utils";
+import { getSettings } from "metabase/lib/visualization_settings";
import cx from "classnames";
import i from "icepick";
+import d3 from "d3";
export default class Scalar extends Component {
static displayName = "Number";
@@ -63,8 +65,8 @@ export default class Scalar extends Component {
card: { ...s.card, display: "bar" },
data: {
cols: [
- { base_type: "TextField", display_name: "Name" },
- { ...s.data.cols[0], display_name: "Value" }],
+ { base_type: "TextField", display_name: "Name", name: "dimension" },
+ { ...s.data.cols[0], display_name: "Value", name: "metric" }],
rows: [
[s.card.name, s.data.rows[0][0]]
]
@@ -79,31 +81,83 @@ export default class Scalar extends Component {
}
render() {
- let { card, data, isDashboard, className, onAddSeries, actionButtons, hovered, onHoverChange, gridSize } = this.props;
+ let { card, data, className, actionButtons, gridSize, settings } = this.props;
if (this.state.isMultiseries) {
return (
<BarChart
- className={className}
- isDashboard={isDashboard}
- onAddSeries={onAddSeries}
- actionButtons={actionButtons}
+ {...this.props}
series={this.state.series}
isScalarSeries={true}
- hovered={hovered}
- onHoverChange={onHoverChange}
- allowSplitAxis={false}
+ settings={{
+ ...settings,
+ ...getSettings(this.state.series)
+ }}
/>
);
}
let isSmall = gridSize && gridSize.width < 4;
+ const column = i.getIn(data, ["cols", 0]);
let scalarValue = i.getIn(data, ["rows", 0, 0]);
- let compactScalarValue = scalarValue == undefined ? "" :
- formatValue(scalarValue, { column: i.getIn(data, ["cols", 0]), compact: isSmall });
- let fullScalarValue = scalarValue == undefined ? "" :
- formatValue(scalarValue, { column: i.getIn(data, ["cols", 0]), compact: false });
+ if (scalarValue == null) {
+ scalarValue = "";
+ }
+
+ let compactScalarValue, fullScalarValue;
+
+ // TODO: some or all of these options should be part of formatValue
+ if (typeof scalarValue === "number" && (column.special_type == null || column.special_type === "number")) {
+ let number = scalarValue;
+
+ // scale
+ const scale = parseFloat(settings["scalar.scale"]);
+ if (!isNaN(scale)) {
+ number *= scale;
+ }
+
+ const localeStringOptions = {};
+
+ // decimals
+ let decimals = parseFloat(settings["scalar.decimals"]);
+ if (!isNaN(decimals)) {
+ number = d3.round(number, decimals);
+ localeStringOptions.minimumFractionDigits = decimals;
+ }
+
+ // currency
+ if (settings["scalar.currency"] != null) {
+ localeStringOptions.style = "currency";
+ localeStringOptions.currency = settings["scalar.currency"];
+ }
+
+ try {
+ // format with separators and correct number of decimals
+ if (settings["scalar.locale"]) {
+ number = number.toLocaleString(settings["scalar.locale"], localeStringOptions);
+ } else {
+ // HACK: no locales that don't thousands separators?
+ number = number.toLocaleString("en", localeStringOptions).replace(/,/g, "");
+ }
+ } catch (e) {
+ console.warn("error formatting scalar", e);
+ }
+ fullScalarValue = formatValue(number, { column: column });
+ } else {
+ fullScalarValue = formatValue(scalarValue, { column: column });
+ }
+
+ compactScalarValue = isSmall ? formatValue(scalarValue, { column: column, compact: true }) : fullScalarValue
+
+ if (settings["scalar.prefix"]) {
+ compactScalarValue = settings["scalar.prefix"] + compactScalarValue;
+ fullScalarValue = settings["scalar.prefix"] + fullScalarValue;
+ }
+ if (settings["scalar.suffix"]) {
+ compactScalarValue = compactScalarValue + settings["scalar.suffix"];
+ fullScalarValue = fullScalarValue + settings["scalar.suffix"];
+ }
return (
<div className={cx(className, styles.Scalar, styles[isSmall ? "small" : "large"])}>
diff --git a/frontend/src/metabase/visualizations/Table.jsx b/frontend/src/metabase/visualizations/Table.jsx
index 5689b06b4a3fe8810c8eaf98aff2921f1178f960..5617c45087a617afbce1ff43de0dec710563d02e 100644
--- a/frontend/src/metabase/visualizations/Table.jsx
+++ b/frontend/src/metabase/visualizations/Table.jsx
@@ -3,8 +3,8 @@ import React, { Component, PropTypes } from "react";
import TableInteractive from "./TableInteractive.jsx";
import TableSimple from "./TableSimple.jsx";
-import Query from "metabase/lib/query";
import * as DataGrid from "metabase/lib/data_grid";
+import _ from "underscore";
export default class Bar extends Component {
static displayName = "Table";
@@ -25,37 +25,48 @@ export default class Bar extends Component {
super(props, context);
this.state = {
- data: null,
- isPivoted: null
+ data: null
};
}
componentWillMount() {
- this.componentWillReceiveProps(this.props);
+ this._updateData(this.props);
}
componentWillReceiveProps(newProps) {
// TODO: remove use of deprecated "card" and "data" props
- if (newProps.data !== this.state.rawData && newProps.data) {
- // check if the data is pivotable (2 groupings + 1 agg != 'rows')
- const isPivoted = !!(
- Query.isStructured(newProps.card.dataset_query) &&
- !Query.isBareRowsAggregation(newProps.card.dataset_query.query) &&
- newProps.data.cols.length === 3
- );
- const data = isPivoted ? DataGrid.pivot(newProps.data) : newProps.data;
+ if (newProps.data !== this.props.data || !_.isEqual(newProps.settings, this.props.settings)) {
+ this._updateData(newProps);
+ }
+ }
+
+ _updateData({ data, settings }) {
+ if (settings["table.pivot"]) {
+ this.setState({
+ data: DataGrid.pivot(data)
+ });
+ } else {
+ const { cols, rows, columns } = data;
+ const colIndexes = settings["table.columns"]
+ .filter(f => f.enabled)
+ .map(f => _.findIndex(cols, (c) => c.name === f.name))
+ .filter(i => i >= 0 && i < cols.length);
+
this.setState({
- isPivoted: isPivoted,
- data: data,
- rawData: newProps.data
+ data: {
+ cols: colIndexes.map(i => cols[i]),
+ columns: colIndexes.map(i => columns[i]),
+ rows: rows.map(row => colIndexes.map(i => row[i]))
+ },
});
}
}
render() {
- let { card, cellClickedFn, setSortFn, isDashboard } = this.props;
- const { isPivoted, data } = this.state;
+ const { card, cellClickedFn, setSortFn, isDashboard, settings } = this.props;
+ const { data } = this.state;
const sort = card.dataset_query.query && card.dataset_query.query.order_by || null;
+ const isPivoted = settings["table.pivot"];
const TableComponent = isDashboard ? TableSimple : TableInteractive;
return (
<TableComponent
diff --git a/frontend/src/metabase/visualizations/USStateMap.jsx b/frontend/src/metabase/visualizations/USStateMap.jsx
deleted file mode 100644
index b213d22404a6ce5ecaa3c148c2fbe027179c07d8..0000000000000000000000000000000000000000
--- a/frontend/src/metabase/visualizations/USStateMap.jsx
+++ /dev/null
@@ -1,20 +0,0 @@
-import React, { Component, PropTypes } from "react";
-
-import ChoroplethMap from "./components/ChoroplethMap.jsx";
-
-import d3 from "d3";
-
-export default class USStateMap extends ChoroplethMap {
- static displayName = "US State Map";
- static identifier = "state";
- static iconName = "statemap";
-
- static defaultProps = {
- geoJsonPath: "/app/charts/us-states.json",
- projection: d3.geo.albersUsa(),
- getRowKey: (row) => String(row[0]).toLowerCase(),
- getRowValue: (row) => row[1] || 0,
- getFeatureKey: (feature) => String(feature.properties.name).toLowerCase(),
- getFeatureName: (feature) => String(feature.properties.name)
- };
-}
diff --git a/frontend/src/metabase/visualizations/WorldMap.jsx b/frontend/src/metabase/visualizations/WorldMap.jsx
deleted file mode 100644
index 5730d06840bf92df4cea12f568184af2173423fc..0000000000000000000000000000000000000000
--- a/frontend/src/metabase/visualizations/WorldMap.jsx
+++ /dev/null
@@ -1,20 +0,0 @@
-import React, { Component, PropTypes } from "react";
-
-import ChoroplethMap from "./components/ChoroplethMap.jsx";
-
-import d3 from "d3";
-
-export default class WorldMap extends ChoroplethMap {
- static displayName = "World Map";
- static identifier = "country";
- static iconName = "countrymap";
-
- static defaultProps = {
- geoJsonPath: "/app/charts/world.json",
- projection: d3.geo.mercator(),
- getRowKey: (row) => String(row[0]).toLowerCase(),
- getRowValue: (row) => row[1] || 0,
- getFeatureKey: (feature) => String(feature.properties.ISO_A2).toLowerCase(),
- getFeatureName: (feature) => String(feature.properties.NAME)
- };
-}
diff --git a/frontend/src/metabase/visualizations/components/CardRenderer.jsx b/frontend/src/metabase/visualizations/components/CardRenderer.jsx
index c7a007cdc71fa45b252fffef21f0470689293a0c..c65d50a7c890fec736400a0ba27a3091a0ae650d 100644
--- a/frontend/src/metabase/visualizations/components/CardRenderer.jsx
+++ b/frontend/src/metabase/visualizations/components/CardRenderer.jsx
@@ -1,12 +1,11 @@
+/* eslint "react/prop-types": "warn" */
+
import React, { Component, PropTypes } from "react";
import ReactDOM from "react-dom";
import ExplicitSize from "metabase/components/ExplicitSize.jsx";
-import * as charting from "metabase/visualizations/lib/CardRenderer";
-
import { isSameSeries } from "metabase/visualizations/lib/utils";
-import { getSettingsForVisualization } from "metabase/lib/visualization_settings";
import dc from "dc";
import cx from "classnames";
@@ -14,8 +13,12 @@ import cx from "classnames";
@ExplicitSize
export default class CardRenderer extends Component {
static propTypes = {
- chartType: PropTypes.string.isRequired,
- series: PropTypes.array.isRequired
+ series: PropTypes.array.isRequired,
+ width: PropTypes.number.isRequired,
+ height: PropTypes.number.isRequired,
+ renderer: PropTypes.func.isRequired,
+ onRenderError: PropTypes.func.isRequired,
+ className: PropTypes.string
};
shouldComponentUpdate(nextProps, nextState) {
@@ -39,13 +42,13 @@ export default class CardRenderer extends Component {
_deregisterChart() {
if (this._chart) {
+ // Prevents memory leak
dc.chartRegistry.deregister(this._chart);
- this._chart = null;
+ delete this._chart;
}
}
renderChart() {
- let { series } = this.props;
let parent = ReactDOM.findDOMNode(this);
// deregister previous chart:
@@ -62,18 +65,7 @@ export default class CardRenderer extends Component {
parent.appendChild(element);
try {
- if (series[0] && series[0].data) {
- // augment with visualization settings
- series = series.map(s => ({
- ...s,
- card: {
- ...s.card,
- visualization_settings: getSettingsForVisualization(s.card.visualization_settings, this.props.chartType)
- }
- }));
-
- this._chart = charting.CardRenderer[this.props.chartType](element, { ...this.props, series, card: series[0].card, data: series[0].data });
- }
+ this._chart = this.props.renderer(element, this.props);
} catch (err) {
console.error(err);
this.props.onRenderError(err.message || err);
diff --git a/frontend/src/metabase/visualizations/components/ChartSettings.jsx b/frontend/src/metabase/visualizations/components/ChartSettings.jsx
new file mode 100644
index 0000000000000000000000000000000000000000..c3df210e3c1e0c7705856db833eb8892cad117cc
--- /dev/null
+++ b/frontend/src/metabase/visualizations/components/ChartSettings.jsx
@@ -0,0 +1,124 @@
+import React, { Component, PropTypes } from "react";
+import cx from "classnames";
+import { assocIn } from "icepick";
+import _ from "underscore";
+
+import Visualization from "metabase/visualizations/components/Visualization.jsx"
+import { getSettingsWidgets } from "metabase/lib/visualization_settings";
+
+const ChartSettingsTab = ({name, active, onClick}) =>
+ <a
+ className={cx('block text-brand py1 text-centered', { 'bg-brand text-white' : active})}
+ onClick={() => onClick(name) }
+ >
+ {name.toUpperCase()}
+ </a>
+
+const ChartSettingsTabs = ({ tabs, selectTab, activeTab}) =>
+ <ul className="bordered rounded flex justify-around overflow-hidden">
+ { tabs.map((tab, index) =>
+ <li className="flex-full border-left" key={index}>
+ <ChartSettingsTab name={tab} active={tab === activeTab} onClick={selectTab} />
+ </li>
+ )}
+ </ul>
+
+const Widget = ({ title, hidden, disabled, widget, value, onChange, props }) => {
+ const W = widget;
+ return (
+ <div className={cx("mb3", { hide: hidden, disable: disabled })}>
+ { title && <h4 className="mb1">{title}</h4> }
+ { W && <W value={value} onChange={onChange} {...props}/> }
+ </div>
+ );
+}
+
+
+class ChartSettings extends Component {
+ constructor (props) {
+ super(props);
+ this.state = {
+ currentTab: null,
+ settings: props.series[0].card.visualization_settings
+ };
+ }
+
+ selectTab = (tab) => {
+ this.setState({ currentTab: tab });
+ }
+
+ onUpdateVisualizationSetting = (path, value) => {
+ this.onChangeSettings({
+ [path.join(".")]: value
+ });
+ }
+
+ onChangeSettings = (newSettings) => {
+ this.setState({
+ settings: {
+ ...this.state.settings,
+ ...newSettings
+ }
+ });
+ }
+
+ onDone() {
+ this.props.onChange(this.state.settings);
+ this.props.onClose();
+ }
+
+ getSeries() {
+ return assocIn(this.props.series, [0, "card", "visualization_settings"], this.state.settings);
+ }
+
+ render () {
+ const { onClose } = this.props;
+
+ const series = this.getSeries();
+
+ const tabs = {};
+ for (let widget of getSettingsWidgets(series, this.onChangeSettings)) {
+ tabs[widget.section] = tabs[widget.section] || [];
+ tabs[widget.section].push(widget);
+ }
+ const tabNames = Object.keys(tabs);
+ const currentTab = this.state.currentTab || tabNames[0];
+ const widgets = tabs[currentTab];
+
+ const isDirty = !_.isEqual(this.props.series[0].card.visualization_settings, this.state.settings);
+
+ return (
+ <div className="flex flex-column spread p4">
+ <h2 className="my2">Customize this chart</h2>
+ { tabNames.length > 1 &&
+ <ChartSettingsTabs tabs={tabNames} selectTab={this.selectTab} activeTab={currentTab}/>
+ }
+ <div className="Grid flex-full mt3">
+ <div className="Grid-cell Cell--1of3 scroll-y p1">
+ { widgets && widgets.map((widget) =>
+ <Widget key={widget.id} {...widget} />
+ )}
+ </div>
+ <div className="Grid-cell relative">
+ <Visualization
+ className="spread"
+ series={series}
+ isEditing={true}
+ onUpdateVisualizationSetting={this.onUpdateVisualizationSetting}
+ />
+ </div>
+ </div>
+ <div className="pt1">
+ <a className={cx("Button Button--primary", { disabled: !isDirty })} href="" onClick={() => this.onDone()}>Done</a>
+ <a className="text-grey-2 ml2" onClick={onClose}>Cancel</a>
+ { !_.isEqual(this.state.settings, {}) &&
+ <a className="Button Button--warning float-right" onClick={() => this.setState({ settings: {} })}>Reset to defaults</a>
+ }
+ </div>
+ </div>
+ )
+ }
+}
+
+
+export default ChartSettings
diff --git a/frontend/src/metabase/visualizations/components/ChartWithLegend.jsx b/frontend/src/metabase/visualizations/components/ChartWithLegend.jsx
index f79b991fd9df536b4eceb559ad0adcaac416d873..fa659407d2129637a91c12d8da40c0ceb7305f0e 100644
--- a/frontend/src/metabase/visualizations/components/ChartWithLegend.jsx
+++ b/frontend/src/metabase/visualizations/components/ChartWithLegend.jsx
@@ -19,7 +19,7 @@ export default class ChartWithLegend extends Component {
};
render() {
- let { children, legendTitles, legendColors, hovered, onHoverChange, className, gridSize, aspectRatio, height, width } = this.props;
+ let { children, legendTitles, legendColors, hovered, onHoverChange, className, gridSize, aspectRatio, height, width, showLegend } = this.props;
// padding
width -= PADDING * 2
@@ -28,7 +28,9 @@ export default class ChartWithLegend extends Component {
let chartWidth, chartHeight, flexChart = false;
let type, LegendComponent;
let isHorizontal = gridSize && gridSize.width > gridSize.height / GRID_ASPECT_RATIO;
- if (!gridSize || (isHorizontal && (gridSize.width > 4 || gridSize.height > 4))) {
+ if (showLegend === false) {
+ type = "small";
+ } else if (!gridSize || (isHorizontal && (showLegend || gridSize.width > 4 || gridSize.height > 4))) {
type = "horizontal";
LegendComponent = LegendVertical;
if (gridSize && gridSize.width < 6) {
@@ -41,7 +43,7 @@ export default class ChartWithLegend extends Component {
chartWidth = desiredWidth;
}
chartHeight = height;
- } else if (!isHorizontal && gridSize.height > 3 && gridSize.width > 2) {
+ } else if (!isHorizontal && (showLegend || (gridSize.height > 3 && gridSize.width > 2))) {
type = "vertical";
LegendComponent = LegendHorizontal;
legendTitles = legendTitles.map(title => Array.isArray(title) ? title[0] : title);
diff --git a/frontend/src/metabase/visualizations/components/ChoroplethMap.jsx b/frontend/src/metabase/visualizations/components/ChoroplethMap.jsx
index 35721e5f0e6fbf61a7290b048fc1eb78c04b748e..3dde58d50cbbda35deb5362d7c5f1337ffe256c0 100644
--- a/frontend/src/metabase/visualizations/components/ChoroplethMap.jsx
+++ b/frontend/src/metabase/visualizations/components/ChoroplethMap.jsx
@@ -13,6 +13,7 @@ import ChartWithLegend from "./ChartWithLegend.jsx";
import ChartTooltip from "./ChartTooltip.jsx";
import d3 from "d3";
+import _ from "underscore";
// const HEAT_MAP_COLORS = [
// "#E1F2FF",
@@ -37,14 +38,44 @@ const HEAT_MAP_COLORS = [
];
const HEAT_MAP_ZERO_COLOR = '#CCC';
+const REGIONS = {
+ "us_states": {
+ geoJsonPath: "/app/charts/us-states.json",
+ projection: d3.geo.albersUsa(),
+ nameProperty: "name",
+ keyProperty: "name",
+
+ getFeatureKey: (feature) => String(feature.properties.name).toLowerCase(),
+ getFeatureName: (feature) => String(feature.properties.name)
+ },
+ "world_countries": {
+ geoJsonPath: "/app/charts/world.json",
+ projection: d3.geo.mercator(),
+ nameProperty: "NAME",
+ keyProperty: "ISO_A2",
+
+ getFeatureKey: (feature) => String(feature.properties.ISO_A2).toLowerCase(),
+ getFeatureName: (feature) => String(feature.properties.NAME)
+ }
+}
+
+const featureCache = new Map();
+function loadFeatures(geoJsonPath, callback) {
+ if (featureCache.has(geoJsonPath)) {
+ setTimeout(() =>
+ callback(featureCache.get(geoJsonPath))
+ , 0);
+ } else {
+ d3.json(geoJsonPath, (json) => {
+ const features = json && json.features;
+ featureCache.set(geoJsonPath, features)
+ callback(features);
+ });
+ }
+}
+
export default class ChoroplethMap extends Component {
static propTypes = {
- geoJsonPath: PropTypes.string.isRequired,
- projection: PropTypes.object.isRequired,
- getRowKey: PropTypes.func.isRequired,
- getRowValue: PropTypes.func.isRequired,
- getFeatureKey: PropTypes.func.isRequired,
- getFeatureName: PropTypes.func.isRequired
};
static minSize = { width: 4, height: 4 };
@@ -60,27 +91,34 @@ export default class ChoroplethMap extends Component {
constructor(props, context) {
super(props, context);
this.state = {
- features: null
+ features: null,
+ geoJsonPath: null
};
}
componentWillMount() {
- d3.json(this.props.geoJsonPath, (json) => {
- this.setState({ features: json.features });
- });
+ this.componentWillReceiveProps(this.props);
}
- render() {
- const {
- series,
- className,
- gridSize,
- hovered, onHoverChange,
- projection,
- getRowKey, getRowValue,
- getFeatureKey, getFeatureName
- } = this.props;
+ componentWillReceiveProps(nextProps) {
+ let details = REGIONS[nextProps.settings["map.region"]];
+ if (this.state.geoJsonPath !== details.geoJsonPath) {
+ this.setState({
+ features: null,
+ geoJsonPath: details.geoJsonPath
+ });
+ loadFeatures(details.geoJsonPath, (features) => {
+ this.setState({
+ features: features,
+ geoJsonPath: details.geoJsonPath
+ });
+ });
+ }
+ }
+ render() {
+ const { series, className, gridSize, hovered, onHoverChange, settings } = this.props;
+ const { projection, nameProperty, keyProperty } = REGIONS[settings["map.region"]];
const { features } = this.state;
if (!features) {
@@ -91,13 +129,19 @@ export default class ChoroplethMap extends Component {
);
}
- const getFeatureValue = (feature) => valuesMap[getFeatureKey(feature)]
+ const [{ data: { cols, rows }}] = series;
+ const dimensionIndex = _.findIndex(cols, (col) => col.name === settings["map.dimension"]);
+ const metricIndex = _.findIndex(cols, (col) => col.name === settings["map.metric"]);
- let rows = series[0].data.rows;
+ const getRowKey = (row) => String(row[dimensionIndex]).toLowerCase();
+ const getRowValue = (row) => row[metricIndex] || 0;
+ const getFeatureName = (feature) => String(feature.properties[nameProperty]);
+ const getFeatureKey = (feature) => String(feature.properties[keyProperty]).toLowerCase();
+ const getFeatureValue = (feature) => valuesMap[getFeatureKey(feature)];
- let valuesMap = {};
- for (let row of rows) {
- valuesMap[getRowKey(row)] = (valuesMap[row[0]] || 0) + getRowValue(row);
+ const valuesMap = {};
+ for (const row of rows) {
+ valuesMap[getRowKey(row)] = (valuesMap[getRowKey(row)] || 0) + getRowValue(row);
}
var colorScale = d3.scale.quantize().domain(d3.extent(rows, d => d[1])).range(HEAT_MAP_COLORS);
diff --git a/frontend/src/metabase/visualizations/components/LegendHeader.jsx b/frontend/src/metabase/visualizations/components/LegendHeader.jsx
index 0aa1a1db2f420d72db8f579c4fc596011cf820f8..5c74081550d89f4e875f5cea5c837aa0db644613 100644
--- a/frontend/src/metabase/visualizations/components/LegendHeader.jsx
+++ b/frontend/src/metabase/visualizations/components/LegendHeader.jsx
@@ -6,10 +6,13 @@ import Icon from "metabase/components/Icon.jsx";
import LegendItem from "./LegendItem.jsx";
import Urls from "metabase/lib/urls";
-import { getCardColors } from "metabase/visualizations/lib/utils";
import cx from "classnames";
+import { normal } from "metabase/lib/colors";
+
+const DEFAULT_COLORS = Object.values(normal);
+
export default class LegendHeader extends Component {
constructor(props, context) {
super(props, context);
@@ -42,12 +45,12 @@ export default class LegendHeader extends Component {
}
render() {
- const { series, hovered, onRemoveSeries, actionButtons, onHoverChange } = this.props;
+ const { series, hovered, onRemoveSeries, actionButtons, onHoverChange, settings } = this.props;
const showDots = series.length > 1;
const isNarrow = this.state.width < 150;
const showTitles = !showDots || !isNarrow;
- let colors = getCardColors(series[0].card);
+ let colors = settings["graph.colors"] || DEFAULT_COLORS;
return (
<div className={cx(styles.LegendHeader, "Card-title mx1 flex flex-no-shrink flex-row align-center")}>
{ series.map((s, index) => [
diff --git a/frontend/src/metabase/visualizations/components/LineAreaBarChart.jsx b/frontend/src/metabase/visualizations/components/LineAreaBarChart.jsx
index 092d1f2bd323bbde132e7a332de0e3483aeb38d1..3671281c595b364b60380621203900c574d69539 100644
--- a/frontend/src/metabase/visualizations/components/LineAreaBarChart.jsx
+++ b/frontend/src/metabase/visualizations/components/LineAreaBarChart.jsx
@@ -4,73 +4,39 @@ import CardRenderer from "./CardRenderer.jsx";
import LegendHeader from "./LegendHeader.jsx";
import ChartTooltip from "./ChartTooltip.jsx";
-import ColorSetting from "./settings/ColorSetting.jsx";
+import lineAreaBarRenderer from "metabase/visualizations/lib/LineAreaBarRenderer";
+
+import { isNumeric, isDate } from "metabase/lib/schema_metadata";
+import {
+ isSameSeries,
+ getChartTypeFromData,
+ getFriendlyName
+} from "metabase/visualizations/lib/utils";
-import { isNumeric, isDate, isDimension, isMetric } from "metabase/lib/schema_metadata";
-import { isSameSeries } from "metabase/visualizations/lib/utils";
import Urls from "metabase/lib/urls";
-import { MinRowsError } from "metabase/visualizations/lib/errors";
+import { MinRowsError, ChartSettingsError } from "metabase/visualizations/lib/errors";
import crossfilter from "crossfilter";
import _ from "underscore";
import cx from "classnames";
-import i from "icepick";
-
-const DIMENSION_METRIC = "DIMENSION_METRIC";
-const DIMENSION_METRIC_METRIC = "DIMENSION_METRIC_METRIC";
-const DIMENSION_DIMENSION_METRIC = "DIMENSION_DIMENSION_METRIC";
-
-const MAX_SERIES = 10;
-
-const isDimensionMetric = (cols, strict = true) =>
- (!strict || cols.length === 2) &&
- isDimension(cols[0]) &&
- isMetric(cols[1])
-
-const isDimensionDimensionMetric = (cols, strict = true) =>
- (!strict || cols.length === 3) &&
- isDimension(cols[0]) &&
- isDimension(cols[1]) &&
- isMetric(cols[2])
-
-const isDimensionMetricMetric = (cols, strict = true) =>
- cols.length >= 3 &&
- isDimension(cols[0]) &&
- cols.slice(1).reduce((acc, col) => acc && isMetric(col), true)
-
-const getChartTypeFromData = (cols, rows, strict = true) => {
- // this should take precendence for backwards compatibilty
- if (isDimensionMetricMetric(cols, strict)) {
- return DIMENSION_METRIC_METRIC;
- } else if (isDimensionDimensionMetric(cols, strict)) {
- let dataset = crossfilter(rows);
- let groups = [0,1].map(i => dataset.dimension(d => d[i]).group());
- let cardinalities = groups.map(group => group.size())
- if (Math.min(...cardinalities) < MAX_SERIES) {
- return DIMENSION_DIMENSION_METRIC;
- }
- } else if (isDimensionMetric(cols, strict)) {
- return DIMENSION_METRIC;
- }
- return null;
-}
export default class LineAreaBarChart extends Component {
static noHeader = true;
static supportsSeries = true;
static minSize = { width: 4, height: 3 };
- static settings = [ColorSetting()];
static isSensible(cols, rows) {
return getChartTypeFromData(cols, rows, false) != null;
}
- static checkRenderable(cols, rows) {
+ static checkRenderable(cols, rows, settings) {
if (rows.length < 1) { throw new MinRowsError(1, rows.length); }
- if (getChartTypeFromData(cols, rows) == null) {
- throw new Error("We couldn’t create a " + this.noun + " based on your query.");
+ const dimensions = (settings["graph.dimensions"] || []).filter(name => name);
+ const metrics = (settings["graph.metrics"] || []).filter(name => name);
+ if (dimensions.length < 1 || metrics.length < 1) {
+ throw new ChartSettingsError("Please select columns for the X and Y axis in the chart settings.", "Data");
}
}
@@ -105,7 +71,6 @@ export default class LineAreaBarChart extends Component {
};
static defaultProps = {
- allowSplitAxis: true
};
componentWillMount() {
@@ -120,48 +85,63 @@ export default class LineAreaBarChart extends Component {
}
transformSeries(newProps) {
- let series = newProps.series;
+ let { series, settings } = newProps;
let nextState = {
series: series,
- isMultiseries: false,
- isStacked: false
+ isMultiseries: false
};
let s = series && series.length === 1 && series[0];
if (s && s.data) {
- let type = getChartTypeFromData(s.data.cols, s.data.rows, false);
- if (type === DIMENSION_METRIC) {
- // no transform
- } else if (type === DIMENSION_DIMENSION_METRIC) {
- let dataset = crossfilter(s.data.rows);
- let groups = [0,1].map(i => dataset.dimension(d => d[i]).group());
- let cardinalities = groups.map(group => group.size())
- // initiall select the smaller cardinality dimension as the series dimension
- let [seriesDimensionIndex, axisDimensionIndex] = (cardinalities[0] > cardinalities[1]) ? [1,0] : [0,1];
- // if the series dimension is a date but the axis dimension is not then swap them
- if (isDate(s.data.cols[seriesDimensionIndex]) && !isDate(s.data.cols[axisDimensionIndex])) {
- [seriesDimensionIndex, axisDimensionIndex] = [axisDimensionIndex, seriesDimensionIndex];
- }
+ const { cols, rows } = s.data;
+
+ const dimensions = settings["graph.dimensions"].filter(d => d != null);
+ const metrics = settings["graph.metrics"].filter(d => d != null);
+ const dimensionIndexes = dimensions.map(dimensionName =>
+ _.findIndex(cols, (col) => col.name === dimensionName)
+ );
+ const metricIndexes = metrics.map(metricName =>
+ _.findIndex(cols, (col) => col.name === metricName)
+ );
+
+ if (dimensions.length > 1) {
+ const dataset = crossfilter(rows);
+ const [dimensionIndex, seriesIndex] = dimensionIndexes;
+ const rowIndexes = [dimensionIndex].concat(metricIndexes);
+ const seriesGroup = dataset.dimension(d => d[seriesIndex]).group()
+
nextState.isMultiseries = true;
- nextState.series = groups[seriesDimensionIndex].reduce(
- (p, v) => p.concat([[...v.slice(0, seriesDimensionIndex), ...v.slice(seriesDimensionIndex+1)]]),
+ nextState.series = seriesGroup.reduce(
+ (p, v) => p.concat([rowIndexes.map(i => v[i])]),
(p, v) => null, () => []
).all().map(o => ({
- card: { ...s.card, name: o.key, id: null },
+ card: {
+ ...s.card,
+ id: null,
+ name: o.key
+ },
data: {
rows: o.value,
- cols: [...s.data.cols.slice(0,seriesDimensionIndex), ...s.data.cols.slice(seriesDimensionIndex+1)]
+ cols: rowIndexes.map(i => s.data.cols[i])
}
}));
- } else if (type === DIMENSION_METRIC_METRIC) {
+ } else if (metrics.length > 1) {
+ const dimensionIndex = dimensionIndexes[0];
+
nextState.isMultiseries = true;
- nextState.isStacked = true;
- nextState.series = s.data.cols.slice(1).map((col, index) => ({
- card: { ...s.card, name: col.display_name || col.name, id: null },
- data: {
- rows: s.data.rows.map(row => [row[0], row[index + 1]]),
- cols: [s.data.cols[0], s.data.cols[index + 1]]
- }
- }));
+ nextState.series = metricIndexes.map(metricIndex => {
+ const col = cols[metricIndex];
+ return {
+ card: {
+ ...s.card,
+ id: null,
+ name: getFriendlyName(col)
+ },
+ data: {
+ rows: rows.map(row => [row[dimensionIndex], row[metricIndex]]),
+ cols: [cols[dimensionIndex], s.data.cols[metricIndex]]
+ }
+ };
+ });
}
}
this.setState(nextState);
@@ -181,6 +161,10 @@ export default class LineAreaBarChart extends Component {
}
}
+ getChartType() {
+ return this.constructor.identifier;
+ }
+
getFidelity() {
let fidelity = { x: 0, y: 0 };
let size = this.props.gridSize || { width: Infinity, height: Infinity };
@@ -201,38 +185,37 @@ export default class LineAreaBarChart extends Component {
getSettings() {
let fidelity = this.getFidelity();
- let settings = this.props.series[0].card.visualization_settings;
+ let settings = { ...this.props.settings };
// no axis in < 1 fidelity
if (fidelity.x < 1) {
- settings = i.assocIn(settings, ["yAxis", "axis_enabled"], false);
+ settings["graph.y_axis.axis_enabled"] = false;
}
if (fidelity.y < 1) {
- settings = i.assocIn(settings, ["xAxis", "axis_enabled"], false);
+ settings["graph.x_axis.axis_enabled"] = false;
}
// no labels in < 2 fidelity
if (fidelity.x < 2) {
- settings = i.assocIn(settings, ["yAxis", "labels_enabled"], false);
+ settings["graph.y_axis.labels_enabled"] = false;
}
if (fidelity.y < 2) {
- settings = i.assocIn(settings, ["xAxis", "labels_enabled"], false);
+ settings["graph.x_axis.labels_enabled"] = false;
}
// smooth interpolation at smallest x/y fidelity
if (fidelity.x === 0 && fidelity.y === 0) {
- settings = i.assocIn(settings, ["line", "interpolate"], "cardinal");
+ settings["line.interpolate"] = "cardinal";
}
return settings;
}
render() {
- const { hovered, isDashboard, onAddSeries, onRemoveSeries, actionButtons, allowSplitAxis } = this.props;
- const { series, isMultiseries, isStacked } = this.state;
+ const { hovered, isDashboard, onAddSeries, onRemoveSeries, actionButtons } = this.props;
+ const { series, isMultiseries } = this.state;
const card = this.props.series[0].card;
- const chartType = this.constructor.identifier;
let settings = this.getSettings();
@@ -250,15 +233,15 @@ export default class LineAreaBarChart extends Component {
actionButtons={actionButtons}
hovered={hovered}
onHoverChange={this.props.onHoverChange}
+ settings={settings}
/>
}
<CardRenderer
{...this.props}
- chartType={chartType}
- series={i.assocIn(series, [0, "card", "visualization_settings"], settings)}
+ chartType={this.getChartType()}
+ settings={settings}
className="flex-full"
- allowSplitAxis={isMultiseries ? false : allowSplitAxis}
- isStacked={isStacked}
+ renderer={lineAreaBarRenderer}
/>
<ChartTooltip series={series} hovered={hovered} />
</div>
diff --git a/frontend/src/metabase/visualizations/components/Visualization.jsx b/frontend/src/metabase/visualizations/components/Visualization.jsx
index d4f44cd23d0c8e72514d3699e66d1ef97fa12cca..b9ef593a152410a4bd122341c7c8e2a401420c46 100644
--- a/frontend/src/metabase/visualizations/components/Visualization.jsx
+++ b/frontend/src/metabase/visualizations/components/Visualization.jsx
@@ -9,6 +9,7 @@ import Tooltip from "metabase/components/Tooltip.jsx";
import { duration } from "metabase/lib/formatting";
import visualizations from "metabase/visualizations";
+import { getSettings } from "metabase/lib/visualization_settings";
import { assoc, getIn } from "icepick";
import _ from "underscore";
@@ -48,6 +49,11 @@ export default class Visualization extends Component {
onUpdateVisualizationSetting: (...args) => console.warn("onUpdateVisualizationSetting", args)
};
+ componentWillReceiveProps() {
+ // clear the error so we can try to render again
+ this.setState({ error: null });
+ }
+
onHoverChange(hovered) {
const { renderInfo } = this.state;
if (hovered) {
@@ -77,13 +83,17 @@ export default class Visualization extends Component {
let loading = !(series.length > 0 && _.every(series, (s) => s.data));
let noResults = false;
+ // don't try to load settings unless data is loaded
+ let settings = this.props.settings || {};
+
if (!loading && !error) {
+ settings = this.props.settings || getSettings(series);
if (!CardVisualization) {
error = "Could not find visualization";
} else {
try {
if (CardVisualization.checkRenderable) {
- CardVisualization.checkRenderable(series[0].data.cols, series[0].data.rows);
+ CardVisualization.checkRenderable(series[0].data.cols, series[0].data.rows, settings);
}
} catch (e) {
// MinRowsError
@@ -112,6 +122,7 @@ export default class Visualization extends Component {
<LegendHeader
series={series}
actionButtons={extra}
+ settings={settings}
/>
</div>
: null
@@ -167,6 +178,7 @@ export default class Visualization extends Component {
{...this.props}
className="flex-full"
series={series}
+ settings={settings}
card={series[0].card} // convienence for single-series visualizations
data={series[0].data} // convienence for single-series visualizations
hovered={this.state.hovered}
diff --git a/frontend/src/metabase/visualizations/components/settings/ChartSettingColorsPicker.jsx b/frontend/src/metabase/visualizations/components/settings/ChartSettingColorsPicker.jsx
new file mode 100644
index 0000000000000000000000000000000000000000..f5fd68c742d05f470afced27bb26c7936b50753a
--- /dev/null
+++ b/frontend/src/metabase/visualizations/components/settings/ChartSettingColorsPicker.jsx
@@ -0,0 +1,51 @@
+import React, { Component, PropTypes } from "react";
+
+import { normal } from 'metabase/lib/colors'
+const DEFAULT_COLOR_HARMONY = Object.values(normal);
+
+import PopoverWithTrigger from "metabase/components/PopoverWithTrigger.jsx";
+
+export default class ChartSettingColorsPicker extends Component {
+ render() {
+ const { value, onChange, seriesTitles } = this.props;
+ return (
+ <div>
+ { seriesTitles.map((title, index) =>
+ <div key={index} className="flex align-center">
+ <PopoverWithTrigger
+ ref="colorPopover"
+ hasArrow={false}
+ tetherOptions={{
+ attachment: 'middle left',
+ targetAttachment: 'middle right',
+ targetOffset: '0 0',
+ constraints: [{ to: 'window', attachment: 'together', pin: ['left', 'right']}]
+ }}
+ triggerElement={
+ <span className="ml1 mr2 bordered inline-block cursor-pointer" style={{ padding: 4, borderRadius: 3 }}>
+ <div style={{ width: 15, height: 15, backgroundColor: value[index] }} />
+ </span>
+ }
+ >
+ <ol className="p1">
+ {DEFAULT_COLOR_HARMONY.map((color, colorIndex) =>
+ <li
+ key={colorIndex}
+ className="CardSettings-colorBlock"
+ style={{ backgroundColor: color }}
+ onClick={() => {
+ onChange([...value.slice(0, index), color, ...value.slice(index + 1)]);
+ this.refs.colorPopover.close();
+ }}
+ ></li>
+ )}
+ </ol>
+ </PopoverWithTrigger>
+
+ <span className="text-bold">{title}</span>
+ </div>
+ )}
+ </div>
+ );
+ }
+}
diff --git a/frontend/src/metabase/visualizations/components/settings/ChartSettingFieldsPicker.jsx b/frontend/src/metabase/visualizations/components/settings/ChartSettingFieldsPicker.jsx
new file mode 100644
index 0000000000000000000000000000000000000000..45c9e18e99b815456373caab3d762f96a606019d
--- /dev/null
+++ b/frontend/src/metabase/visualizations/components/settings/ChartSettingFieldsPicker.jsx
@@ -0,0 +1,56 @@
+import React, { Component, PropTypes } from "react";
+
+import Icon from "metabase/components/Icon";
+import cx from "classnames";
+
+import ChartSettingSelect from "./ChartSettingSelect.jsx";
+
+const ChartSettingFieldsPicker = ({ value = [], onChange, options, addAnother }) =>
+ <div>
+ { Array.isArray(value) ? value.map((v, index) =>
+ <div key={index} className="flex align-center">
+ <ChartSettingSelect
+ value={v}
+ options={options}
+ onChange={(v) => {
+ let newValue = [...value];
+ // this swaps the position of the existing value
+ let existingIndex = value.indexOf(v);
+ if (existingIndex >= 0) {
+ newValue.splice(existingIndex, 1, value[index]);
+ }
+ // replace with the new value
+ newValue.splice(index, 1, v);
+ onChange(newValue);
+ }}
+ isInitiallyOpen={v === undefined}
+ />
+ <Icon
+ name="close"
+ className={cx("ml1 text-grey-4 text-brand-hover cursor-pointer", {
+ "disabled hidden": value.filter(v => v != null).length < 2
+ })}
+ width={12} height={12}
+ onClick={() => onChange([...value.slice(0, index), ...value.slice(index + 1)])}
+ />
+ </div>
+ ) : <span className="text-error">error</span>}
+ { addAnother &&
+ <div className="mt1">
+ <a onClick={() => {
+ const remaining = options.filter(o => value.indexOf(o.value) < 0);
+ if (remaining.length === 1) {
+ // if there's only one unused option, use it
+ onChange(value.concat([remaining[0].value]));
+ } else {
+ // otherwise leave it blank
+ onChange(value.concat([undefined]));
+ }
+ }}>
+ {addAnother}
+ </a>
+ </div>
+ }
+ </div>
+
+export default ChartSettingFieldsPicker;
diff --git a/frontend/src/metabase/visualizations/components/settings/ChartSettingInput.jsx b/frontend/src/metabase/visualizations/components/settings/ChartSettingInput.jsx
new file mode 100644
index 0000000000000000000000000000000000000000..ecd0cbacdc632be6d37d292eb8b070305f5a8dfa
--- /dev/null
+++ b/frontend/src/metabase/visualizations/components/settings/ChartSettingInput.jsx
@@ -0,0 +1,10 @@
+import React, { Component, PropTypes } from "react";
+
+const ChartSettingInput = ({ value, onChange }) =>
+ <input
+ className="input block full"
+ value={value}
+ onChange={(e) => onChange(e.target.value)}
+ />
+
+export default ChartSettingInput;
diff --git a/frontend/src/metabase/visualizations/components/settings/ChartSettingInputNumeric.jsx b/frontend/src/metabase/visualizations/components/settings/ChartSettingInputNumeric.jsx
new file mode 100644
index 0000000000000000000000000000000000000000..a6b58708c1261d6ac52629b75aa037e40ef4a8c0
--- /dev/null
+++ b/frontend/src/metabase/visualizations/components/settings/ChartSettingInputNumeric.jsx
@@ -0,0 +1,43 @@
+import React, { Component, PropTypes } from "react";
+
+import cx from "classnames";
+
+export default class ChartSettingInputNumeric extends Component {
+ constructor(props, context) {
+ super(props, context);
+ this.state = {
+ value: String(props.value == null ? "" : props.value)
+ };
+ }
+
+ componentWillReceiveProps(nextProps) {
+ this.setState({ value: String(nextProps.value == null ? "" : nextProps.value) });
+ }
+
+ render() {
+ const { onChange } = this.props;
+ return (
+ <input
+ className={cx("input block full", { "border-error": this.state.value !== "" && isNaN(parseFloat(this.state.value)) })}
+ value={this.state.value}
+ onChange={(e) => {
+ let num = parseFloat(e.target.value);
+ if (!isNaN(num) && num !== this.props.value) {
+ onChange(num);
+ }
+ this.setState({ value: e.target.value });
+ }}
+ onBlur={(e) => {
+ let num = parseFloat(e.target.value);
+ if (isNaN(num)) {
+ onChange(undefined);
+ } else {
+ onChange(num);
+ }
+ }}
+ />
+ );
+ }
+}
+
+export default ChartSettingInputNumeric;
diff --git a/frontend/src/metabase/visualizations/components/settings/ChartSettingOrderedFields.jsx b/frontend/src/metabase/visualizations/components/settings/ChartSettingOrderedFields.jsx
new file mode 100644
index 0000000000000000000000000000000000000000..e31e725bf287ceb1c0b042ac0bae7523eea21fd8
--- /dev/null
+++ b/frontend/src/metabase/visualizations/components/settings/ChartSettingOrderedFields.jsx
@@ -0,0 +1,68 @@
+import React, { Component, PropTypes } from "react";
+
+import CheckBox from "metabase/components/CheckBox.jsx";
+import Icon from "metabase/components/Icon.jsx";
+import { Sortable } from "react-sortable";
+
+import cx from "classnames";
+
+@Sortable
+class OrderedFieldListItem extends Component {
+ render() {
+ return (
+ <div {...this.props} className="list-item">{this.props.children}</div>
+ )
+ }
+}
+
+export default class ChartSettingOrderedFields extends Component {
+ constructor(props) {
+ super(props);
+ this.state = {
+ draggingIndex: null,
+ data: { items: [...this.props.value] }
+ };
+ }
+
+ componentWillReceiveProps(nextProps) {
+ this.setState({ data: { items: [...nextProps.value] } })
+ }
+
+ updateState = (obj) => {
+ this.setState(obj);
+ if (obj.draggingIndex == null) {
+ this.props.onChange([...this.state.data.items]);
+ }
+ }
+
+ setEnabled = (index, checked) => {
+ const items = [...this.state.data.items];
+ items[index] = { ...items[index], enabled: checked };
+ this.setState({ data: { items } });
+ this.props.onChange([...items]);
+ }
+
+ render() {
+ const { columnNames } = this.props;
+ return (
+ <div className="list">
+ {this.state.data.items.map((item, i) =>
+ <OrderedFieldListItem
+ key={i}
+ updateState={this.updateState}
+ items={this.state.data.items}
+ draggingIndex={this.state.draggingIndex}
+ sortId={i}
+ outline="list"
+ >
+ <div className={cx("flex align-center p1", { "text-grey-2": !item.enabled })} >
+ <CheckBox checked={item.enabled} className={cx("text-brand", { "text-grey-2": !item.enabled })} onChange={(e) => this.setEnabled(i, e.target.checked)} invertChecked />
+ <span className="ml1 h4">{columnNames[item.name]}</span>
+ <Icon className="flex-align-right text-grey-2 mr1 cursor-pointer" name="grabber" width={14} height={14}/>
+ </div>
+ </OrderedFieldListItem>
+ )}
+ </div>
+ )
+ }
+}
diff --git a/frontend/src/metabase/visualizations/components/settings/ChartSettingSelect.jsx b/frontend/src/metabase/visualizations/components/settings/ChartSettingSelect.jsx
new file mode 100644
index 0000000000000000000000000000000000000000..c2828825ffd6e941c5d70a8f37ccc0cae1d914b3
--- /dev/null
+++ b/frontend/src/metabase/visualizations/components/settings/ChartSettingSelect.jsx
@@ -0,0 +1,18 @@
+import React, { Component, PropTypes } from "react";
+
+import Select from "metabase/components/Select.jsx";
+
+import _ from "underscore";
+
+const ChartSettingSelect = ({ value, onChange, options = [], isInitiallyOpen }) =>
+ <Select
+ className="block flex-full"
+ value={_.findWhere(options, { value })}
+ options={options}
+ optionNameFn={(o) => o.name}
+ optionValueFn={(o) => o.value}
+ onChange={onChange}
+ isInitiallyOpen={isInitiallyOpen}
+ />
+
+export default ChartSettingSelect;
diff --git a/frontend/src/metabase/visualizations/components/settings/ChartSettingToggle.jsx b/frontend/src/metabase/visualizations/components/settings/ChartSettingToggle.jsx
new file mode 100644
index 0000000000000000000000000000000000000000..b3c5c073842e2d137d526bbdb79c2dcdc80b15c8
--- /dev/null
+++ b/frontend/src/metabase/visualizations/components/settings/ChartSettingToggle.jsx
@@ -0,0 +1,11 @@
+import React, { Component, PropTypes } from "react";
+
+import Toggle from "metabase/components/Toggle.jsx";
+
+const ChartSettingToggle = ({ value, onChange }) =>
+ <Toggle
+ value={value}
+ onChange={onChange}
+ />
+
+export default ChartSettingToggle;
diff --git a/frontend/src/metabase/visualizations/index.js b/frontend/src/metabase/visualizations/index.js
index bccc333af0fe42898dd3741b04fe3b8985dab5a2..f0912c8a1c6eeea9c661a3592c451dad0609b8b5 100644
--- a/frontend/src/metabase/visualizations/index.js
+++ b/frontend/src/metabase/visualizations/index.js
@@ -5,13 +5,12 @@ import LineChart from "./LineChart.jsx";
import BarChart from "./BarChart.jsx";
import PieChart from "./PieChart.jsx";
import AreaChart from "./AreaChart.jsx";
-import USStateMap from "./USStateMap.jsx";
-import WorldMap from "./WorldMap.jsx";
-import PinMap from "./PinMap.jsx";
+import MapViz from "./Map.jsx";
const visualizations = new Map();
+const aliases = new Map();
visualizations.get = function(key) {
- return Map.prototype.get.call(this, key) || Table;
+ return Map.prototype.get.call(this, key) || aliases.get(key) || Table;
}
export function registerVisualization(visualization) {
@@ -23,6 +22,9 @@ export function registerVisualization(visualization) {
throw new Error("Visualization with that identifier is already registered: " + visualization.name);
}
visualizations.set(identifier, visualization);
+ for (let alias of visualization.aliases || []) {
+ aliases.set(alias, visualization);
+ }
}
registerVisualization(Scalar);
@@ -31,9 +33,7 @@ registerVisualization(LineChart);
registerVisualization(BarChart);
registerVisualization(PieChart);
registerVisualization(AreaChart);
-registerVisualization(USStateMap);
-registerVisualization(WorldMap);
-registerVisualization(PinMap);
+registerVisualization(MapViz);
import { enableVisualizationEasterEgg } from "./lib/utils";
diff --git a/frontend/src/metabase/visualizations/lib/ChartRenderer.js b/frontend/src/metabase/visualizations/lib/ChartRenderer.js
deleted file mode 100644
index 3292e687a2fa46630a16eff598b7ad3cd01a168e..0000000000000000000000000000000000000000
--- a/frontend/src/metabase/visualizations/lib/ChartRenderer.js
+++ /dev/null
@@ -1,108 +0,0 @@
-
-import { getAvailableCanvasWidth, getAvailableCanvasHeight } from "./utils";
-
-import crossfilter from "crossfilter";
-import dc from "dc";
-
-/// ChartRenderer and its various subclasses take care of adjusting settings for different types of charts
-///
-/// Class Hierarchy:
-/// + ChartRenderer
-/// +--- pie chart
-/// \--+ GeoHeatmapChartRenderer
-/// +--- state heatmap
-/// \--- country heatmap
-///
-/// The general rendering looks something like this [for a bar chart]:
-/// 1) Call GeoHeatmapChartRenderer(...)
-/// 2) Code in ChartRenderer(...) runs and does setup common across all charts
-/// 3) Code in GeoHeatmapChartRenderer(...) runs and does setup common across the charts
-/// 4) Further customizations specific to bar charts take place in .customize()
-export default function ChartRenderer(element, card, result, chartType) {
- // ------------------------------ CONSTANTS ------------------------------ //
- var DEFAULT_CARD_WIDTH = 900,
- DEFAULT_CARD_HEIGHT = 500;
-
- // ------------------------------ PROPERTIES ------------------------------ //
- this.element = element;
- this.card = card;
- this.result = result;
- this.chartType = chartType;
-
- this.settings = this.card.visualization_settings;
-
- // ------------------------------ METHODS ------------------------------ //
- this.setData = function(data, dimensionFn, groupFn) {
- this.data = data;
-
- // as a convenience create dimensionFn/groupFn if a string key or int index is passed in instead of a fn
- if (typeof dimensionFn === 'string' || typeof dimensionFn === 'number') {
- var dimensionKey = dimensionFn;
- dimensionFn = function(d) {
- return d[dimensionKey];
- };
- }
- if (typeof groupFn === 'string' || typeof groupFn === 'number') {
- var groupKey = groupFn;
- groupFn = function(d) {
- return d[groupKey];
- };
- }
-
- this.dimension = crossfilter(data).dimension(dimensionFn);
- this.group = this.dimension.group().reduceSum(groupFn);
-
- this.chart.dimension(this.dimension)
- .group(this.group);
-
- return this;
- };
-
- /// Provides an opportunity to customize the underlying dc.js chart object directly without breaking our pretty Fluent API flow.
- /// fn gets called as follows: fn(chart)
- /// Use it to do things like chart.projection() (etc.)
- /// fluent API - returns self
- this.customize = function(customizationFunction) {
- customizationFunction(this.chart);
- return this;
- };
-
- /// register a new callback to be called after this.chart.render() completes
- /// TODO - Use of this can probably be replaced with dc.js chart.on('postRender', function(chart){ ... })
- this._onRenderFns = [];
- this.onRender = function(onRenderFn) {
- this._onRenderFns.push(onRenderFn);
- return this; // fluent API <3
- };
-
- /// render the chart owned by this ChartRenderer. This should be the final call made in the fluent API call chain
- this.render = function() {
- this.chart.render();
- var numFns = this._onRenderFns.length;
- for (var i = 0; i < numFns; i++) {
- this._onRenderFns[i].call(this);
- }
- };
-
- // ------------------------------ INTERNAL METHODS ------------------------------ //
-
- /// determine what width we should use for the chart - we can look at size of the card header / footer and match that
- this._getWidth = function() {
- return getAvailableCanvasWidth(this.element) || DEFAULT_CARD_WIDTH;
- };
-
- /// height available to card for the chart, if available. Equal to height of card minus heights of header + footer.
- this._getHeight = function() {
- return getAvailableCanvasHeight(this.element) || DEFAULT_CARD_HEIGHT;
- };
-
- // ------------------------------ INITIALIZATION ------------------------------ //
- this.chart = dc[this.chartType](this.element)
- .width(this._getWidth())
- .height(this._getHeight());
-
- // ENABLE LEGEND IF SPECIFIED IN VISUALIZATION SETTINGS
- // I'm sure it made sense to somebody at some point to make this setting live in two different places depending on the type of chart.
- var legendEnabled = chartType === 'pieChart' ? this.settings.pie.legend_enabled : this.settings.chart.legend_enabled;
- if (legendEnabled) this.chart.legend(dc.legend());
-}
diff --git a/frontend/src/metabase/visualizations/lib/GeoHeatmapChartRenderer.js b/frontend/src/metabase/visualizations/lib/GeoHeatmapChartRenderer.js
deleted file mode 100644
index c5636f2e4a8e9f96aa5c14549707fb3398eee0a6..0000000000000000000000000000000000000000
--- a/frontend/src/metabase/visualizations/lib/GeoHeatmapChartRenderer.js
+++ /dev/null
@@ -1,82 +0,0 @@
-import ChartRenderer from "./ChartRenderer";
-
-import d3 from "d3";
-
-export default function GeoHeatmapChartRenderer(element, card, result) {
- // ------------------------------ CONSTANTS ------------------------------ //
- /// various shades that should be used in State + World Heatmaps
- /// TODO - These colors are from the dc.js examples and aren't the same ones we used on highcharts. Do we want custom Metabase colors?
- var HEAT_MAP_COLORS = d3.scale.quantize().range([
- "#E2F2FF",
- "#C4E4FF",
- "#9ED2FF",
- "#81C5FF",
- "#6BBAFF",
- "#51AEFF",
- "#36A2FF",
- "#1E96FF",
- "#0089FF",
- "#0061B5"
- ]),
- /// color to use when a state/country has a value of zero
- HEAT_MAP_ZERO_COLOR = '#CCC';
-
- // ------------------------------ SUPERCLASS INIT ------------------------------ //
- ChartRenderer.call(this, element, card, result, 'geoChoroplethChart');
-
- // ------------------------------ METHODS ------------------------------ //
- this.superSetData = this.setData;
- this.setData = function(data, dimension, groupFn) {
- this.superSetData(data, dimension, groupFn);
- this.chart.colorDomain(d3.extent(this.data, (d) => d.value));
- return this;
- };
-
- /// store path to JSON file and SHAPEKEYFN for later. The JSON will be loaded via d3 when render() is called.
- /// SHAPEKEYFN is a function with signature f(geo_feature) that should return the key that will be used to identify the feature. i.e. country code / state code.
- this.setJson = function(jsonPath, shapeKeyFn) {
- this.jsonPath = jsonPath;
- this.shapeKeyFn = shapeKeyFn;
- return this;
- };
-
- /// Set the map projection to a d3.geo projection type, and adjust its scale/translation based on available height/width.
- /// We need to do this or the map size won't match the chart size.
- this.setProjection = function(projection) {
- // determine how width/height would need to be adjusted to fit the space available
- // 'translation' of the map is effectively its center so we can use that to determine the width/height of the map at the current scale
- var currentTranslation = projection.translate(),
- currentWidth = currentTranslation[0] * 2.0,
- currentHeight = currentTranslation[1] * 2.0,
- widthMultiplier = this.chart.width() / currentWidth,
- heightMultiplier = this.chart.height() / currentHeight;
-
- // Now adjust the scale and translation of the projection.
- // Multiply it by the smaller of the width/height multipliers so the entire map will fit in available area
- var scaleMultiplier = widthMultiplier < heightMultiplier ? widthMultiplier : heightMultiplier;
- projection.scale(projection.scale() * scaleMultiplier);
- projection.translate([this.chart.width() / 2.0, this.chart.height() / 2.0]);
-
- // apply projection to chart
- this.chart.projection(projection);
-
- return this;
- };
-
- /// call d3.json to load the JSON in question and call super.render() in the completion lambda
- this.superRender = this.render;
- this.render = function() {
- var renderer = this; // keep reference to self because 'this' is undefined inside the callback lambda
- d3.json(this.jsonPath, function(json) {
- renderer.chart.overlayGeoJson(json.features, 'features', renderer.shapeKeyFn);
- renderer.superRender();
- });
- };
-
- // ------------------------------ INITIALIZATION ------------------------------ //
- var chart = this.chart; // need ref that can be captured by lambda passed to colorCalculator()
- chart.colors(HEAT_MAP_COLORS)
- .colorCalculator(function(d) {
- return d ? chart.colors()(d) : HEAT_MAP_ZERO_COLOR;
- });
-}
diff --git a/frontend/src/metabase/visualizations/lib/CardRenderer.js b/frontend/src/metabase/visualizations/lib/LineAreaBarRenderer.js
similarity index 58%
rename from frontend/src/metabase/visualizations/lib/CardRenderer.js
rename to frontend/src/metabase/visualizations/lib/LineAreaBarRenderer.js
index 150dcbaab211bf03efc7e2ac0bd1d3370df91b44..69449dd9b25d8bc11c20d94f86e4f4bb247dc7f0 100644
--- a/frontend/src/metabase/visualizations/lib/CardRenderer.js
+++ b/frontend/src/metabase/visualizations/lib/LineAreaBarRenderer.js
@@ -1,17 +1,13 @@
-import _ from "underscore";
import crossfilter from "crossfilter";
import d3 from "d3";
import dc from "dc";
import moment from "moment";
-import GeoHeatmapChartRenderer from "./GeoHeatmapChartRenderer";
-
import {
getAvailableCanvasWidth,
getAvailableCanvasHeight,
computeSplit,
getFriendlyName,
- getCardColors,
getXValues
} from "./utils";
@@ -92,11 +88,11 @@ function applyChartTimeseriesXAxis(chart, settings, series, xValues) {
// compute the domain
let xDomain = d3.extent(xValues);
- if (settings.xAxis.labels_enabled) {
- chart.xAxisLabel(settings.xAxis.title_text || getFriendlyName(dimensionColumn));
+ if (settings["graph.x_axis.labels_enabled"]) {
+ chart.xAxisLabel(settings["graph.x_axis.title_text"] || getFriendlyName(dimensionColumn));
}
- if (settings.xAxis.axis_enabled) {
- chart.renderVerticalGridLines(settings.xAxis.gridLine_enabled);
+ if (settings["graph.x_axis.axis_enabled"]) {
+ chart.renderVerticalGridLines(settings["graph.x_axis.gridLine_enabled"]);
if (dimensionColumn.unit == null) {
dimensionColumn = { ...dimensionColumn, unit: dataInterval.interval };
@@ -129,11 +125,11 @@ function applyChartTimeseriesXAxis(chart, settings, series, xValues) {
function applyChartOrdinalXAxis(chart, settings, series, xValues) {
const dimensionColumn = series[0].data.cols[0];
- if (settings.xAxis.labels_enabled) {
- chart.xAxisLabel(settings.xAxis.title_text || getFriendlyName(dimensionColumn));
+ if (settings["graph.x_axis.labels_enabled"]) {
+ chart.xAxisLabel(settings["graph.x_axis.title_text"] || getFriendlyName(dimensionColumn));
}
- if (settings.xAxis.axis_enabled) {
- chart.renderVerticalGridLines(settings.xAxis.gridLine_enabled);
+ if (settings["graph.x_axis.axis_enabled"]) {
+ chart.renderVerticalGridLines(settings["graph.x_axis.gridLine_enabled"]);
chart.xAxis().ticks(xValues.length);
adjustTicksIfNeeded(chart.xAxis(), chart.width(), MIN_PIXELS_PER_TICK.x);
@@ -160,10 +156,10 @@ function applyChartOrdinalXAxis(chart, settings, series, xValues) {
function applyChartYAxis(chart, settings, series, yAxisSplit) {
- if (settings.yAxis.labels_enabled) {
+ if (settings["graph.y_axis.labels_enabled"]) {
// left
- if (settings.yAxis.title_text) {
- chart.yAxisLabel(settings.yAxis.title_text);
+ if (settings["graph.y_axis.title_text"]) {
+ chart.yAxisLabel(settings["graph.y_axis.title_text"]);
} else if (yAxisSplit[0].length === 1) {
chart.yAxisLabel(getFriendlyName(series[yAxisSplit[0][0]].data.cols[1]));
}
@@ -173,9 +169,8 @@ function applyChartYAxis(chart, settings, series, yAxisSplit) {
}
}
- if (settings.yAxis.axis_enabled) {
+ if (settings["graph.y_axis.axis_enabled"]) {
chart.renderHorizontalGridLines(true);
- chart.elasticY(true);
adjustTicksIfNeeded(chart.yAxis(), chart.height(), MIN_PIXELS_PER_TICK.y);
if (yAxisSplit.length > 1 && chart.rightYAxis) {
@@ -187,6 +182,12 @@ function applyChartYAxis(chart, settings, series, yAxisSplit) {
chart.rightYAxis().ticks(0);
}
}
+
+ if (settings["graph.y_axis.auto_range"]) {
+ chart.elasticY(true);
+ } else {
+ chart.y(d3.scale.linear().domain([settings["graph.y_axis.min"], settings["graph.y_axis.max"]]))
+ }
}
function applyChartTooltips(chart, onHoverChange) {
@@ -217,8 +218,8 @@ function applyChartLineBarSettings(chart, settings, chartType, isLinear, isTimes
// LINE/AREA:
// for chart types that have an 'interpolate' option (line/area charts), enable based on settings
if (chart.interpolate) {
- if (settings.line.interpolate) {
- chart.interpolate(settings.line.interpolate);
+ if (settings["line.interpolate"]) {
+ chart.interpolate(settings["line.interpolate"]);
} else {
chart.interpolate(DEFAULT_INTERPOLATION);
}
@@ -264,8 +265,8 @@ function lineAndBarOnRender(chart, settings) {
function enableDots() {
let enableDots;
const dots = chart.svg().selectAll(".dc-tooltip .dot")[0];
- if (settings.line && !settings.line.marker_enabled) {
- enableDots = false;
+ if (settings["line.marker_enabled"] != null) {
+ enableDots = !!settings["line.marker_enabled"];
} else if (dots.length > 500) {
// more than 500 dots is almost certainly too dense, don't waste time computing the voronoi map
enableDots = false;
@@ -351,19 +352,19 @@ function lineAndBarOnRender(chart, settings) {
}
function hideDisabledLabels() {
- if (!settings.xAxis.labels_enabled) {
+ if (!settings["graph.x_axis.labels_enabled"]) {
chart.selectAll(".x-axis-label").remove();
}
- if (!settings.yAxis.labels_enabled) {
+ if (!settings["graph.y_axis.labels_enabled"]) {
chart.selectAll(".y-axis-label").remove();
}
}
function hideDisabledAxis() {
- if (!settings.xAxis.axis_enabled) {
+ if (!settings["graph.x_axis.axis_enabled"]) {
chart.selectAll(".axis.x").remove();
}
- if (!settings.yAxis.axis_enabled) {
+ if (!settings["graph.y_axis.axis_enabled"]) {
chart.selectAll(".axis.y, .axis.yr").remove();
}
}
@@ -411,9 +412,9 @@ function lineAndBarOnRender(chart, settings) {
let mins = computeMinHorizontalMargins()
// adjust the margins to fit the X and Y axis tick and label sizes, if enabled
- adjustMargin("bottom", "height", ".axis.x", ".x-axis-label", settings.xAxis.labels_enabled);
- adjustMargin("left", "width", ".axis.y", ".y-axis-label.y-label", settings.yAxis.labels_enabled);
- adjustMargin("right", "width", ".axis.yr", ".y-axis-label.yr-label", settings.yAxis.labels_enabled);
+ adjustMargin("bottom", "height", ".axis.x", ".x-axis-label", settings["graph.x_axis.labels_enabled"]);
+ adjustMargin("left", "width", ".axis.y", ".y-axis-label.y-label", settings["graph.y_axis.labels_enabled"]);
+ adjustMargin("right", "width", ".axis.yr", ".y-axis-label.yr-label", settings["graph.y_axis.labels_enabled"]);
// set margins to the max of the various mins
chart.margins().left = Math.max(5, mins.left, chart.margins().left);
@@ -435,273 +436,194 @@ function lineAndBarOnRender(chart, settings) {
chart.render();
}
-export let CardRenderer = {
- lineAreaBar(element, chartType, { series, onHoverChange, onRender, isScalarSeries, isStacked, allowSplitAxis }) {
- const colors = getCardColors(series[0].card);
-
- const settings = series[0].card.visualization_settings;
+export default function lineAreaBar(element, { series, onHoverChange, onRender, chartType, isScalarSeries, settings }) {
+ const colors = settings["graph.colors"];
- const isTimeseries = dimensionIsTimeseries(series[0].data);
- const isLinear = false;
+ const isTimeseries = dimensionIsTimeseries(series[0].data);
+ const isLinear = false;
- // no stacking lines, always stack area
- isStacked = (isStacked && chartType !== "line") || (chartType === "area");
+ // validation. we require at least 2 rows for line charting
+ if (series[0].data.cols.length < 2) {
+ return;
+ }
- // validation. we require at least 2 rows for line charting
- if (series[0].data.cols.length < 2) {
- return;
- }
+ let datas = series.map((s, index) =>
+ s.data.rows.map(row => [
+ (isTimeseries) ? parseTimestamp(row[0]) : String(row[0]),
+ ...row.slice(1)
+ ])
+ );
- let datas = series.map((s, index) =>
- s.data.rows.map(row => [
- (isTimeseries) ? parseTimestamp(row[0]) : row[0],
- ...row.slice(1)
- ])
- );
+ let xValues = getXValues(datas, chartType);
- let xValues = getXValues(datas, chartType);
+ let dimension, groups, yAxisSplit;
- let dimension, groups, yAxisSplit;
+ if (settings["stackable.stacked"] && datas.length > 1) {
+ let dataset = crossfilter();
+ datas.map((data, i) =>
+ dataset.add(data.map(d => ({
+ [0]: d[0],
+ [i + 1]: d[1]
+ })))
+ );
- if (isStacked && datas.length > 1) {
- let dataset = crossfilter();
+ dimension = dataset.dimension(d => d[0]);
+ groups = [
datas.map((data, i) =>
- dataset.add(data.map(d => ({
- [0]: d[0],
- [i + 1]: d[1]
- })))
- );
-
- dimension = dataset.dimension(d => d[0]);
- groups = [
- datas.map((data, i) =>
- dimension.group().reduceSum(d => (d[i + 1] || 0))
- )
- ];
-
- yAxisSplit = [series.map((s,i) => i)];
- } else {
- let dataset = crossfilter();
- datas.map(data => dataset.add(data));
-
- dimension = dataset.dimension(d => d[0]);
- groups = datas.map(data => {
- let dim = crossfilter(data).dimension(d => d[0]);
- return data[0].slice(1).map((_, i) =>
- dim.group().reduceSum(d => (d[i + 1] || 0))
- )
- });
-
- let yExtents = groups.map(group => d3.extent(group[0].all(), d => d.value));
+ dimension.group().reduceSum(d => (d[i + 1] || 0))
+ )
+ ];
- if (allowSplitAxis) {
- yAxisSplit = computeSplit(yExtents);
- } else {
- yAxisSplit = [series.map((s,i) => i)];
- }
- }
-
- if (isScalarSeries) {
- xValues = datas.map(data => data[0][0]);
- }
+ yAxisSplit = [series.map((s,i) => i)];
+ } else {
+ let dataset = crossfilter();
+ datas.map(data => dataset.add(data));
+
+ dimension = dataset.dimension(d => d[0]);
+ groups = datas.map(data => {
+ let dim = crossfilter(data).dimension(d => d[0]);
+ return data[0].slice(1).map((_, i) =>
+ dim.group().reduceSum(d => (d[i + 1] || 0))
+ )
+ });
- // HACK: This ensures each group is sorted by the same order as xValues,
- // otherwise we can end up with line charts with x-axis labels in the correct order
- // but the points in the wrong order. There may be a more efficient way to do this.
- let sortMap = new Map()
- for (const [index, key] of xValues.entries()) {
- sortMap.set(key, index);
- }
- for (const group of groups) {
- group.forEach(g => {
- const sorted = g.top(Infinity).sort((a, b) => sortMap.get(a.key) - sortMap.get(b.key));
- g.all = () => sorted;
- });
- }
+ let yExtents = groups.map(group => d3.extent(group[0].all(), d => d.value));
- let parent;
- if (groups.length > 1) {
- parent = initializeChart(series[0].card, element, "compositeChart")
+ if (!isScalarSeries && settings["graph.y_axis.auto_split"] !== false) {
+ yAxisSplit = computeSplit(yExtents);
} else {
- parent = element;
+ yAxisSplit = [series.map((s,i) => i)];
}
+ }
- let charts = groups.map((group, index) => {
- let chart = dc[getDcjsChartType(chartType)](parent);
-
- chart
- .dimension(dimension)
- .group(group[0])
- .transitionDuration(0)
- .useRightYAxis(yAxisSplit.length > 1 && yAxisSplit[1].includes(index))
-
- // multiple series
- if (groups.length > 1) {
- // multiple stacks
- if (group.length > 1) {
- // compute shades of the assigned color
- chart.ordinalColors(colorShades(colors[index % colors.length], group.length))
- } else {
- chart.colors(colors[index % colors.length])
- }
- } else {
- chart.ordinalColors(colors)
- }
+ if (isScalarSeries) {
+ xValues = datas.map(data => data[0][0]);
+ }
- for (var i = 1; i < group.length; i++) {
- chart.stack(group[i])
- }
+ // HACK: This ensures each group is sorted by the same order as xValues,
+ // otherwise we can end up with line charts with x-axis labels in the correct order
+ // but the points in the wrong order. There may be a more efficient way to do this.
+ let sortMap = new Map()
+ for (const [index, key] of xValues.entries()) {
+ sortMap.set(key, index);
+ }
+ for (const group of groups) {
+ group.forEach(g => {
+ const sorted = g.top(Infinity).sort((a, b) => sortMap.get(a.key) - sortMap.get(b.key));
+ g.all = () => sorted;
+ });
+ }
- applyChartLineBarSettings(chart, settings, chartType, isLinear, isTimeseries);
+ let parent;
+ if (groups.length > 1) {
+ parent = initializeChart(series[0].card, element, "compositeChart")
+ } else {
+ parent = element;
+ }
- return chart;
- });
+ let charts = groups.map((group, index) => {
+ let chart = dc[getDcjsChartType(chartType)](parent);
- let chart;
- if (charts.length > 1) {
- chart = parent.compose(charts);
-
- if (!isScalarSeries) {
- chart.on("renderlet.grouped-bar", function (chart) {
- // HACK: dc.js doesn't support grouped bar charts so we need to manually resize/reposition them
- // https://github.com/dc-js/dc.js/issues/558
- let barCharts = chart.selectAll(".sub rect:first-child")[0].map(node => node.parentNode.parentNode.parentNode);
- if (barCharts.length > 0) {
- let oldBarWidth = parseFloat(barCharts[0].querySelector("rect").getAttribute("width"));
- let newBarWidthTotal = oldBarWidth / barCharts.length;
- let seriesPadding =
- newBarWidthTotal < 4 ? 0 :
- newBarWidthTotal < 8 ? 1 :
- 2;
- let newBarWidth = Math.max(1, newBarWidthTotal - seriesPadding);
-
- chart.selectAll("g.sub rect").attr("width", newBarWidth);
- barCharts.forEach((barChart, index) => {
- barChart.setAttribute("transform", "translate(" + ((newBarWidth + seriesPadding) * index) + ", 0)");
- });
- }
- })
- }
+ chart
+ .dimension(dimension)
+ .group(group[0])
+ .transitionDuration(0)
+ .useRightYAxis(yAxisSplit.length > 1 && yAxisSplit[1].includes(index))
- // HACK: compositeChart + ordinal X axis shenanigans
- if (chartType === "bar") {
- chart._rangeBandPadding(BAR_PADDING_RATIO) // https://github.com/dc-js/dc.js/issues/678
+ // multiple series
+ if (groups.length > 1) {
+ // multiple stacks
+ if (group.length > 1) {
+ // compute shades of the assigned color
+ chart.ordinalColors(colorShades(colors[index % colors.length], group.length))
} else {
- chart._rangeBandPadding(1) // https://github.com/dc-js/dc.js/issues/662
+ chart.colors(colors[index % colors.length])
}
} else {
- chart = charts[0];
- chart.transitionDuration(0)
- applyChartBoundary(chart, element);
+ chart.ordinalColors(colors)
}
- // x-axis settings
- // TODO: we should support a linear (numeric) x-axis option
- if (isTimeseries) {
- applyChartTimeseriesXAxis(chart, settings, series, xValues);
- } else {
- applyChartOrdinalXAxis(chart, settings, series, xValues);
+ for (var i = 1; i < group.length; i++) {
+ chart.stack(group[i])
}
- // y-axis settings
- // TODO: if we are multi-series this could be split axis
- applyChartYAxis(chart, settings, series, yAxisSplit);
+ applyChartLineBarSettings(chart, settings, chartType, isLinear, isTimeseries);
- applyChartTooltips(chart, (hovered) => {
- if (onHoverChange) {
- // disable tooltips on lines
- if (hovered && hovered.element && hovered.element.classList.contains("line")) {
- delete hovered.element;
- }
- onHoverChange(hovered);
- }
- });
+ return chart;
+ });
- // if the chart supports 'brushing' (brush-based range filter), disable this since it intercepts mouse hovers which means we can't see tooltips
- if (chart.brushOn) {
- chart.brushOn(false);
+ let chart;
+ if (charts.length > 1) {
+ chart = parent.compose(charts);
+
+ if (!isScalarSeries) {
+ chart.on("renderlet.grouped-bar", function (chart) {
+ // HACK: dc.js doesn't support grouped bar charts so we need to manually resize/reposition them
+ // https://github.com/dc-js/dc.js/issues/558
+ let barCharts = chart.selectAll(".sub rect:first-child")[0].map(node => node.parentNode.parentNode.parentNode);
+ if (barCharts.length > 0) {
+ let oldBarWidth = parseFloat(barCharts[0].querySelector("rect").getAttribute("width"));
+ let newBarWidthTotal = oldBarWidth / barCharts.length;
+ let seriesPadding =
+ newBarWidthTotal < 4 ? 0 :
+ newBarWidthTotal < 8 ? 1 :
+ 2;
+ let newBarWidth = Math.max(1, newBarWidthTotal - seriesPadding);
+
+ chart.selectAll("g.sub rect").attr("width", newBarWidth);
+ barCharts.forEach((barChart, index) => {
+ barChart.setAttribute("transform", "translate(" + ((newBarWidth + seriesPadding) * index) + ", 0)");
+ });
+ }
+ })
}
- // render
- chart.render();
+ // HACK: compositeChart + ordinal X axis shenanigans
+ if (chartType === "bar") {
+ chart._rangeBandPadding(BAR_PADDING_RATIO) // https://github.com/dc-js/dc.js/issues/678
+ } else {
+ chart._rangeBandPadding(1) // https://github.com/dc-js/dc.js/issues/662
+ }
+ } else {
+ chart = charts[0];
+ chart.transitionDuration(0)
+ applyChartBoundary(chart, element);
+ }
- // apply any on-rendering functions
- lineAndBarOnRender(chart, settings);
+ // x-axis settings
+ // TODO: we should support a linear (numeric) x-axis option
+ if (isTimeseries) {
+ applyChartTimeseriesXAxis(chart, settings, series, xValues);
+ } else {
+ applyChartOrdinalXAxis(chart, settings, series, xValues);
+ }
- onRender && onRender({ yAxisSplit });
+ // y-axis settings
+ // TODO: if we are multi-series this could be split axis
+ applyChartYAxis(chart, settings, series, yAxisSplit);
- return chart;
- },
-
- bar(element, props) {
- return CardRenderer.lineAreaBar(element, "bar", props);
- },
-
- line(element, props) {
- return CardRenderer.lineAreaBar(element, "line", props);
- },
-
- area(element, props) {
- return CardRenderer.lineAreaBar(element, "area", props);
- },
-
- state(element, { card, data, onHoverChange }) {
- let chartData = data.rows.map(value => ({
- stateCode: value[0],
- value: value[1]
- }));
-
- let chartRenderer = new GeoHeatmapChartRenderer(element, card, data)
- .setData(chartData, 'stateCode', 'value')
- .setJson('/app/charts/us-states.json', d => d.properties.name)
- .setProjection(d3.geo.albersUsa())
- .customize(chart => {
- applyChartTooltips(chart, (hovered) => {
- if (onHoverChange) {
- if (hovered && hovered.d) {
- let row = _.findWhere(data.rows, { [0]: hovered.d.properties.name });
- hovered.data = { key: row[0], value: row[1] };
- }
- onHoverChange && onHoverChange(hovered);
- }
- });
- })
- .render();
+ applyChartTooltips(chart, (hovered) => {
+ if (onHoverChange) {
+ // disable tooltips on lines
+ if (hovered && hovered.element && hovered.element.classList.contains("line")) {
+ delete hovered.element;
+ }
+ onHoverChange(hovered);
+ }
+ });
- return chartRenderer;
- },
+ // if the chart supports 'brushing' (brush-based range filter), disable this since it intercepts mouse hovers which means we can't see tooltips
+ if (chart.brushOn) {
+ chart.brushOn(false);
+ }
- country(element, { card, data, onHoverChange }) {
- let chartData = data.rows.map(value => {
- // Does this actually make sense? If country is > 2 characters just use the first 2 letters as the country code ?? (WTF)
- let countryCode = value[0];
- if (typeof countryCode === "string") {
- countryCode = countryCode.substring(0, 2).toUpperCase();
- }
+ // render
+ chart.render();
- return {
- code: countryCode,
- value: value[1]
- };
- });
+ // apply any on-rendering functions
+ lineAndBarOnRender(chart, settings);
- let chartRenderer = new GeoHeatmapChartRenderer(element, card, data)
- .setData(chartData, 'code', 'value')
- .setJson('/app/charts/world.json', d => d.properties.ISO_A2) // 2-letter country code
- .setProjection(d3.geo.mercator())
- .customize(chart => {
- applyChartTooltips(chart, (hovered) => {
- if (onHoverChange) {
- if (hovered && hovered.d) {
- let row = _.findWhere(data.rows, { [0]: hovered.d.properties.ISO_A2 });
- hovered.data = { key: hovered.d.properties.NAME, value: row[1] };
- }
- onHoverChange(hovered);
- }
- });
- })
- .render();
+ onRender && onRender({ yAxisSplit });
- return chartRenderer;
- }
-};
+ return chart;
+}
diff --git a/frontend/src/metabase/visualizations/lib/errors.js b/frontend/src/metabase/visualizations/lib/errors.js
index e323e57759a267374289a36385a56d900a259ed3..72e8da0a04fddae2c72183d0d795e3539c36da86 100644
--- a/frontend/src/metabase/visualizations/lib/errors.js
+++ b/frontend/src/metabase/visualizations/lib/errors.js
@@ -20,3 +20,10 @@ export class LatitudeLongitudeError {
this.message = "Bummer. We can't actually do a pin map for this data because we require both a latitude and longitude column.";
}
}
+
+export class ChartSettingsError {
+ constructor(message, section) {
+ this.message = message || "Please configure this chart in the chart settings";
+ this.section = section;
+ }
+}
diff --git a/frontend/src/metabase/visualizations/lib/utils.js b/frontend/src/metabase/visualizations/lib/utils.js
index 8cb881553705489c21eb43d258c85f5a19289cf5..be149a12dac0d30eed34ae759274a2fc02653705 100644
--- a/frontend/src/metabase/visualizations/lib/utils.js
+++ b/frontend/src/metabase/visualizations/lib/utils.js
@@ -159,6 +159,57 @@ export function colorShade(hex, shade = 0) {
).join("");
}
+import { isDimension, isMetric } from "metabase/lib/schema_metadata";
+import crossfilter from "crossfilter";
+
+export const DIMENSION_METRIC = "DIMENSION_METRIC";
+export const DIMENSION_METRIC_METRIC = "DIMENSION_METRIC_METRIC";
+export const DIMENSION_DIMENSION_METRIC = "DIMENSION_DIMENSION_METRIC";
+
+const MAX_SERIES = 10;
+
+export const isDimensionMetric = (cols, strict = true) =>
+ (!strict || cols.length === 2) &&
+ isDimension(cols[0]) &&
+ isMetric(cols[1])
+
+export const isDimensionDimensionMetric = (cols, strict = true) =>
+ (!strict || cols.length === 3) &&
+ isDimension(cols[0]) &&
+ isDimension(cols[1]) &&
+ isMetric(cols[2])
+
+export const isDimensionMetricMetric = (cols, strict = true) =>
+ cols.length >= 3 &&
+ isDimension(cols[0]) &&
+ cols.slice(1).reduce((acc, col) => acc && isMetric(col), true)
+
+
+function computeColumnCardinality(cols, rows) {
+ let dataset = crossfilter(rows);
+ for (const [index, col] of Object.entries(cols)) {
+ if (col.cardinality == null) {
+ col.cardinality = dataset.dimension(d => d[index]).group().size();
+ }
+ }
+}
+
+export function getChartTypeFromData(cols, rows, strict = true) {
+ computeColumnCardinality(cols, rows);
+
+ // this should take precendence for backwards compatibilty
+ if (isDimensionMetricMetric(cols, strict)) {
+ return DIMENSION_METRIC_METRIC;
+ } else if (isDimensionDimensionMetric(cols, strict)) {
+ if (cols[0].cardinality < MAX_SERIES || cols[1].cardinality < MAX_SERIES) {
+ return DIMENSION_DIMENSION_METRIC;
+ }
+ } else if (isDimensionMetric(cols, strict)) {
+ return DIMENSION_METRIC;
+ }
+ return null;
+}
+
export function enableVisualizationEasterEgg(code, OriginalVisualization, EasterEggVisualization) {
if (!code) {
code = [38, 38, 40, 40, 37, 39, 37, 39, 66, 65];
diff --git a/npm-shrinkwrap.json b/npm-shrinkwrap.json
index f425551bcfde3458c0128c967db8116feff8b8f4..05b5ec7330cec29ec856f68bee73dad41b4fd965 100644
--- a/npm-shrinkwrap.json
+++ b/npm-shrinkwrap.json
@@ -690,13 +690,13 @@
"version": "1.2.2"
},
"angular": {
- "version": "1.2.28"
+ "version": "1.2.30"
},
"angular-cookie": {
"version": "4.1.0"
},
"angular-cookies": {
- "version": "1.2.28"
+ "version": "1.2.30"
},
"angular-http-auth": {
"version": "1.2.1"
@@ -705,10 +705,10 @@
"version": "1.2.28"
},
"angular-resource": {
- "version": "1.2.28"
+ "version": "1.2.30"
},
"angular-route": {
- "version": "1.2.28"
+ "version": "1.2.30"
},
"babel-core": {
"version": "6.10.4",
@@ -10277,6 +10277,9 @@
}
}
},
+ "number-to-locale-string": {
+ "version": "1.0.1"
+ },
"password-generator": {
"version": "2.0.2",
"dependencies": {
@@ -12915,6 +12918,9 @@
}
}
},
+ "react-sortable": {
+ "version": "1.0.1"
+ },
"react-virtualized": {
"version": "6.3.2",
"dependencies": {
diff --git a/package.json b/package.json
index a52de04e4808582a8a0107786077e36085ddd355..9efe1f4b2108177924988a8fd5b12802cd43bfff 100644
--- a/package.json
+++ b/package.json
@@ -11,12 +11,12 @@
},
"dependencies": {
"ace-builds": "^1.2.2",
- "angular": "1.2.28",
+ "angular": "^1.2.30",
"angular-cookie": "^4.1.0",
- "angular-cookies": "1.2.28",
+ "angular-cookies": "^1.2.30",
"angular-http-auth": "1.2.1",
- "angular-resource": "1.2.28",
- "angular-route": "1.2.28",
+ "angular-resource": "^1.2.30",
+ "angular-route": "^1.2.30",
"babel-polyfill": "^6.6.1",
"classnames": "^2.1.3",
"color": "^0.11.1",
@@ -33,6 +33,7 @@
"moment": "^2.12.0",
"node-libs-browser": "^0.5.3",
"normalizr": "^2.0.0",
+ "number-to-locale-string": "^1.0.1",
"password-generator": "^2.0.1",
"react": "^15.2.1",
"react-addons-css-transition-group": "^15.2.1",
@@ -46,6 +47,7 @@
"react-resizable": "^1.0.1",
"react-retina-image": "^2.0.0",
"react-router": "1.0.0",
+ "react-sortable": "^1.0.1",
"react-virtualized": "^6.1.2",
"recompose": "^0.20.2",
"redux": "^3.0.4",