Skip to content
Snippets Groups Projects
Commit 9c07e743 authored by Allen Gilliland's avatar Allen Gilliland
Browse files

Merge pull request #1255 from metabase/time_unit_display 

Formatting date/times by granularity
parents f0d45ab9 3cf54968
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
frontend/src/card/card.charting.js
+ 43
− 25
View file @ 9c07e743
......@@ -6,7 +6,7 @@ import d3 from 'd3';
import dc from 'dc';
import moment from 'moment';
import { formatNumber } from "metabase/lib/formatting";
import { formatNumber, formatValueString } from "metabase/lib/formatting";
import tip from 'd3-tip';
tip(d3);
......@@ -197,21 +197,26 @@ function applyChartTimeseriesXAxis(chart, card, coldefs, data) {
// set the axis label
if (x.labels_enabled) {
chart.xAxisLabel((x.title_text || null) || coldefs[0].name);
chart.xAxisLabel((x.title_text || null) || coldefs[0].display_name);
chart.renderVerticalGridLines(x.gridLine_enabled);
xAxis.tickFormat(d3.time.format.multi([
[".%L", (d) => d.getMilliseconds()],
[":%S", (d) => d.getSeconds()],
["%I:%M", (d) => d.getMinutes()],
["%I %p", (d) => d.getHours()],
["%a %d", (d) => d.getDay() && d.getDate() != 1],
["%b %d", (d) => d.getDate() != 1],
["%B", (d) => d.getMonth()], // default "%B"
["%Y", () => true] // default "%Y"
]));
if (coldefs[0] && coldefs[0].unit) {
xAxis.tickFormat(d => formatValueString(d, coldefs[0]));
} else {
xAxis.tickFormat(d3.time.format.multi([
[".%L", (d) => d.getMilliseconds()],
[":%S", (d) => d.getSeconds()],
["%I:%M", (d) => d.getMinutes()],
["%I %p", (d) => d.getHours()],
["%a %d", (d) => d.getDay() && d.getDate() != 1],
["%b %d", (d) => d.getDate() != 1],
["%B", (d) => d.getMonth()], // default "%B"
["%Y", () => true] // default "%Y"
]));
}
// Compute a sane interval to display based on the data granularity, domain, and chart width
var interval = computeTimeseriesTicksInterval(data, chart.width(), MIN_PIXELS_PER_TICK.x);
var interval = computeTimeseriesTicksInterval(data, coldefs[0], chart.width(), MIN_PIXELS_PER_TICK.x);
xAxis.ticks(d3.time[interval.interval], interval.count);
} else {
xAxis.ticks(0);
......@@ -245,6 +250,16 @@ const TIMESERIES_INTERVALS = [
{ interval: "year", count: 1, testFn: (d) => d.getUTCMonth() } // 1 year
];
const TIMESERIES_INTERVAL_INDEX_BY_UNIT = {
"minute": 1,
"hour": 9,
"day": 13,
"week": 15,
"month": 16,
"quarter": 17,
"year": 18,
};
function computeTimeseriesDataInvervalIndex(data) {
// Keep track of the value seen for each level of granularity,
// if any don't match then we know the data is *at least* that granular.
......@@ -265,16 +280,19 @@ function computeTimeseriesDataInvervalIndex(data) {
return index - 1;
}
function computeTimeseriesTicksInterval(data, chartWidth, minPixelsPerTick) {
function computeTimeseriesTicksInterval(data, col, chartWidth, minPixelsPerTick) {
// If the interval that matches the data granularity results in too many ticks reduce the granularity until it doesn't.
// TODO: compute this directly instead of iteratively
var maxTickCount = Math.round(chartWidth / minPixelsPerTick);
var domain = getMinMax(data, 0);
var index = computeTimeseriesDataInvervalIndex(data);
let maxTickCount = Math.round(chartWidth / minPixelsPerTick);
let domain = getMinMax(data, 0);
let index = col && col.unit ? TIMESERIES_INTERVAL_INDEX_BY_UNIT[col.unit] : null;
if (typeof index !== "number") {
index = computeTimeseriesDataInvervalIndex(data);
}
while (index < TIMESERIES_INTERVALS.length - 1) {
var interval = TIMESERIES_INTERVALS[index];
var intervalMs = moment(0).add(interval.count, interval.interval).valueOf();
var tickCount = (domain[1] - domain[0]) / intervalMs;
let interval = TIMESERIES_INTERVALS[index];
let intervalMs = moment(0).add(interval.count, interval.interval).valueOf();
let tickCount = (domain[1] - domain[0]) / intervalMs;
if (tickCount <= maxTickCount) {
break;
}
......@@ -294,7 +312,7 @@ function applyChartOrdinalXAxis(chart, card, coldefs, data, minPixelsPerTick) {
xAxis = chart.xAxis();
if (x.labels_enabled) {
chart.xAxisLabel((x.title_text || null) || coldefs[0].name);
chart.xAxisLabel((x.title_text || null) || coldefs[0].display_name);
chart.renderVerticalGridLines(x.gridLine_enabled);
xAxis.ticks(data.length);
adjustTicksIfNeeded(xAxis, chart.width(), minPixelsPerTick);
......@@ -313,7 +331,7 @@ function applyChartOrdinalXAxis(chart, card, coldefs, data, minPixelsPerTick) {
xAxis.tickValues(visibleKeys);
}
xAxis.tickFormat((d) => d == null ? '[unset]' : d);
xAxis.tickFormat(d => formatValueString(d, coldefs[0]));
} else {
xAxis.ticks(0);
xAxis.tickFormat('');
......@@ -332,7 +350,7 @@ function applyChartYAxis(chart, card, coldefs, data, minPixelsPerTick) {
yAxis = chart.yAxis();
if (y.labels_enabled) {
chart.yAxisLabel((y.title_text || null) || coldefs[1].name);
chart.yAxisLabel((y.title_text || null) || coldefs[1].display_name);
chart.renderHorizontalGridLines(true);
if (y.min || y.max) {
......@@ -382,7 +400,7 @@ function applyChartTooltips(dcjsChart, card, cols) {
// TODO: this is not the ideal way to calculate the percentage, but it works for now
values += " (" + formatNumber((d.endAngle - d.startAngle) / Math.PI * 50) + '%)'
}
return '<div><span class="ChartTooltip-name">' + d.data.key + '</span></div>' +
return '<div><span class="ChartTooltip-name">' + formatValueString(d.data.key, cols[0]) + '</span></div>' +
'<div><span class="ChartTooltip-value">' + values + '</span></div>';
});
......@@ -816,7 +834,7 @@ export var CardRenderer = {
.group(group)
.colors(settings.pie.colors)
.colorCalculator((d, i) => settings.pie.colors[((i * 5) + Math.floor(i / 5)) % settings.pie.colors.length])
.label(row => row.key == null ? '[unset]' : row.key)
.label(row => formatValueString(row.key, result.cols[0]))
.title(function(d) {
// ghetto rounding to 1 decimal digit since Math.round() doesn't let
// you specify a precision and always rounds to int
......
frontend/src/lib/formatting.js
+ 48
− 1
View file @ 9c07e743
import d3 from "d3";
import inflection from "inflection";
import moment from "moment";
import React from "react";
var precisionNumberFormatter = d3.format(".2r");
var fixedNumberFormatter = d3.format(",.f");
......@@ -24,9 +26,48 @@ export function formatScalar(scalar) {
}
}
export function formatCell(value, column) {
function formatMajorMinor(major, minor, majorWidth = 3) {
return (
<span>
<span style={{minWidth: majorWidth + "em"}} className="inline-block text-right text-bold">{major}</span>
{" - "}
<span>{minor}</span>
</span>
);
}
export function formatWithUnit(value, unit) {
let m = moment(value);
switch (unit) {
case "hour": // 12 AM - January 1, 2015
return formatMajorMinor(m.format("h A"), m.format("MMMM D, YYYY"));
case "day": // January 1, 2015
return m.format("MMMM D, YYYY");
case "week": // 1st - 2015
return formatMajorMinor(m.format("wo"), m.format("YYYY"));
case "month": // January 2015
return <div><span className="text-bold">{m.format("MMMM")}</span> {m.format("YYYY")}</div>;
case "year": // 2015
return String(value);
case "quarter": // Q1 - 2015
return formatMajorMinor(m.format("[Q]Q"), m.format("YYYY"), 0);
case "hour-of-day": // 12 AM
return moment().hour(value).format("h A");
case "day-of-week": // Sunday
return moment().day(value - 1).format("dddd");
case "week-of-year": // 1st
return moment().week(value).format("wo");
case "month-of-year": // January
return moment().month(value - 1).format("MMMM");
}
return String(value);
}
export function formatValue(value, column) {
if (value == undefined) {
return null
} else if (column && column.unit != null) {
return formatWithUnit(value, column.unit)
} else if (typeof value === "string") {
return value;
} else if (typeof value === "number") {
......@@ -43,6 +84,12 @@ export function formatCell(value, column) {
}
}
export function formatValueString(value, column) {
var e = document.createElement("div");
React.render(<div>{formatValue(value, column)}</div>, e);
return e.textContent;
}
export function singularize(...args) {
return inflection.singularize(...args);
}
......
frontend/src/query_builder/QueryVisualizationTable.jsx
+ 7
− 3
View file @ 9c07e743
......@@ -6,7 +6,7 @@ import Popover from "metabase/components/Popover.jsx";
import MetabaseAnalytics from '../lib/analytics';
import DataGrid from "metabase/lib/data_grid";
import { formatCell } from "metabase/lib/formatting";
import { formatValue, capitalize } from "metabase/lib/formatting";
import _ from "underscore";
import cx from "classnames";
......@@ -164,7 +164,7 @@ export default class QueryVisualizationTable extends Component {
}
cellRenderer(cellData, cellDataKey, rowData, rowIndex, columnData, width) {
cellData = cellData != null ? formatCell(cellData, this.props.data.cols[cellDataKey]) : null;
cellData = cellData != null ? formatValue(cellData, this.props.data.cols[cellDataKey]) : null;
var key = 'cl'+rowIndex+'_'+cellDataKey;
if (this.props.cellIsClickableFn(rowIndex, cellDataKey)) {
......@@ -216,11 +216,15 @@ export default class QueryVisualizationTable extends Component {
colVal = (column && column.display_name && column.display_name.toString()) ||
(column && column.name && column.name.toString());
if (column.unit) {
colVal += ": " + capitalize(column.unit.replace(/-/g, " "))
}
if (!colVal && this.props.pivot && columnIndex !== 0) {
colVal = "Unset";
}
var headerClasses = cx('MB-DataTable-header align-center', {
var headerClasses = cx('MB-DataTable-header cellData align-center', {
'MB-DataTable-header--sorted': (this.props.sort && (this.props.sort[0][0] === column.id)),
});
......
frontend/src/query_builder/TimeGroupingPopover.jsx
+ 1
− 1
View file @ 9c07e743
......@@ -15,7 +15,7 @@ const BUCKETINGS = [
"year",
null,
// "minute-of-hour",
// "hour-of-day",
"hour-of-day",
"day-of-week",
// "day-of-month",
// "day-of-year",
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment