Skip to content
New issue

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

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

Already on GitHub? Sign in to your account

D3 custom formatter #3268

Merged
merged 27 commits into from
Oct 19, 2023
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
27 commits
Select commit Hold shift + click to select a range
87ec54f
remove percent-of-total on percent columns
bcolloran Oct 12, 2023
cd5c52e
Merge branch 'main' into d3-custom-formatter
bcolloran Oct 17, 2023
aac0ab6
add selector for active measure FormatPreset, remove prop drilling
bcolloran Oct 17, 2023
8ef9314
remove unused 'options' arg from humanizeDataType
bcolloran Oct 17, 2023
1cf8884
use d3 formatting in measure big nums
bcolloran Oct 17, 2023
a9066b1
d3 formatter working in leaderboards + cleanup
bcolloran Oct 17, 2023
c368a9f
clean up number formatting in LeaderboardListItem and context column
bcolloran Oct 18, 2023
500a885
move humanizing fns with rest of number formatting
bcolloran Oct 18, 2023
19889f2
little cleanups
bcolloran Oct 18, 2023
442cffd
more cleanup and prop-drilling removal
bcolloran Oct 18, 2023
de39370
more cleanup
bcolloran Oct 18, 2023
f57efa4
more cleanup
bcolloran Oct 18, 2023
a2f3708
Merge branch 'd3-custom-formatter' of https://github.com/rilldata/ril…
bcolloran Oct 18, 2023
f3c68b9
add d3 format in dimension tables, additional cleanup
bcolloran Oct 18, 2023
466f0ef
remove never used slot from <MeasureChange>
bcolloran Oct 18, 2023
2c21b10
roll ProfileColumn into VirtualizedTableColumns, since it is never us…
bcolloran Oct 18, 2023
b0c6cd6
add missing type
bcolloran Oct 18, 2023
cbfa7d9
remove the added "+" on string values of changes in the dimension tab…
bcolloran Oct 18, 2023
0ec0745
update doc
bcolloran Oct 18, 2023
d5601f2
clean up selector API
bcolloran Oct 18, 2023
19580b8
cleanups
bcolloran Oct 18, 2023
af67206
update docs
bcolloran Oct 18, 2023
e619bbc
use tailwind for styling
bcolloran Oct 18, 2023
fd9e23b
use term "unabridged"
bcolloran Oct 18, 2023
1220945
return empty string from measure value formatter if measureSpec is no…
bcolloran Oct 18, 2023
b02cd3c
consolidate number formatting code in one place
bcolloran Oct 18, 2023
04896b0
add another data validation
bcolloran Oct 19, 2023
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
13 changes: 7 additions & 6 deletions docs/docs/reference/project-files/dashboards.md
Original file line number Diff line number Diff line change
Expand Up @@ -41,12 +41,13 @@ _**`measures`**_ — numeric [aggregates](../../develop/metrics-dashboard#measur
- _**`description`**_ — a freeform text description of the dimension for your dashboard _(optional)_
- _**`ignore`**_ — hides the measure _(optional)_
- _**`valid_percent_of_total`**_ — a boolean indicating whether percent-of-total values should be rendered for this measure _(optional)_
- _**`format_preset`**_ — one of a set of values that format dashboard measures. _(optional; default is humanize)_. Possible values include:
- _`humanize`_ — round off numbers in an opinionated way to thousands (K), millions (M), billions (B), etc
- _`none`_ — raw output
- _`currency_usd`_ — output rounded to 2 decimal points prepended with a dollar sign
- _`percentage`_ — output transformed from a rate to a percentage appended with a percentage sign
- _`interval_ms`_ — time intervals given in milliseconds are transformed into human readable time units like hours (h), days (d), years (y), etc
- _**`format_d3`**_ — controls the formatting of this measure in the dashboard using a [d3-format string](https://d3js.org/d3-format). If an invalid format string is supplied, measures will be formatted with `format_preset: humanize` (described below). Measures cannot have both `format_preset` and `format_d3` entries. _(optional; if neither `format_preset` nor `format_d3` is supplied, measures will be formatted with the `humanize` preset)_
- _**`format_preset`**_ — controls the formatting of this measure in the dashboard according to option specified below. Measures cannot have both `format_preset` and `format_d3` entries. _(optional; if neither `format_preset` nor `format_d3` is supplied, measures will be formatted with the `humanize` preset)_
- _`humanize`_ — round off numbers in an opinionated way to thousands (K), millions (M), billions (B), etc
- _`none`_ — raw output
- _`currency_usd`_ — output rounded to 2 decimal points prepended with a dollar sign
- _`percentage`_ — output transformed from a rate to a percentage appended with a percentage sign
- _`interval_ms`_ — time intervals given in milliseconds are transformed into human readable time units like hours (h), days (d), years (y), etc

_**`security`**_ - define a [security policy](../../develop/security) for the dashboard _(optional)_
- _**`access`**_ - Expression indicating if the user should be granted access to the dashboard. If not defined, it will resolve to `false` and the dashboard won't be accessible to anyone. Needs to be a valid SQL expression that evaluates to a boolean. _(optional)_
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -4,8 +4,8 @@
WithGraphicContexts,
WithTween,
} from "@rilldata/web-common/components/data-graphic/functional-components";
import { formatMeasurePercentageDifference } from "@rilldata/web-common/features/dashboards/humanize-numbers";
import { justEnoughPrecision } from "@rilldata/web-common/lib/formatters";
import { formatMeasurePercentageDifference } from "@rilldata/web-common/lib/number-formatting/percentage-formatter";
import { cubicOut } from "svelte/easing";
import { fade } from "svelte/transition";
export let point;
Expand Down
7 changes: 1 addition & 6 deletions web-common/src/components/data-types/MeasureChange.svelte
Original file line number Diff line number Diff line change
Expand Up @@ -5,9 +5,6 @@
export let dark = false;
export let customStyle = "";
export let value;

$: isNegative =
(typeof value === "string" && value?.startsWith("-")) || value < 0;
</script>

<Base
Expand All @@ -16,7 +13,5 @@
'block text-right'}"
{dark}
>
<slot name="value">
{!isNegative ? "+" : ""}{value}
</slot>
{value}
</Base>
Original file line number Diff line number Diff line change
Expand Up @@ -10,13 +10,11 @@
import type { TimeComparisonOption } from "@rilldata/web-common/lib/time/types";
import { crossfade, fly } from "svelte/transition";
import Spinner from "../../entity-management/Spinner.svelte";
import {
formatMeasurePercentageDifference,
humanizeDataType,
FormatPreset,
humanizeDataTypeExpanded,
} from "../humanize-numbers";

import type { MetricsViewSpecMeasureV2 } from "@rilldata/web-common/runtime-client";
import { createMeasureValueFormatter } from "@rilldata/web-common/lib/number-formatting/format-measure-value";
import { FormatPreset } from "@rilldata/web-common/lib/number-formatting/humanizer-types";
import { formatMeasurePercentageDifference } from "@rilldata/web-common/lib/number-formatting/percentage-formatter";

export let measure: MetricsViewSpecMeasureV2;
export let value: number;
Expand All @@ -29,26 +27,32 @@

$: description =
measure?.description || measure?.label || measure?.expression;
$: formatPreset =
(measure?.formatPreset as FormatPreset) || FormatPreset.HUMANIZE;

$: measureValueFormatter = createMeasureValueFormatter(measure);
$: measureValueFormatterUnabridged = createMeasureValueFormatter(
measure,
true
);

$: name = measure?.label || measure?.expression;

$: valueIsPresent = value !== undefined && value !== null;

$: isComparisonPositive = Number.isFinite(diff) && (diff as number) >= 0;
const [send, receive] = crossfade({ fallback: fly });

$: diff = comparisonValue ? value - comparisonValue : false;
$: noChange = !diff;
$: diff =
valueIsPresent && comparisonValue !== undefined
? value - comparisonValue
: 0;
$: noChange = !comparisonValue;
$: isComparisonPositive = diff >= 0;

$: formattedDiff = `${isComparisonPositive ? "+" : ""}${humanizeDataType(
diff,
formatPreset
$: formattedDiff = `${isComparisonPositive ? "+" : ""}${measureValueFormatter(
diff
)}`;

/** when the measure is a percentage, we don't show a percentage change. */
$: measureIsPercentage = formatPreset === FormatPreset.PERCENTAGE;
$: measureIsPercentage = measure?.formatPreset === FormatPreset.PERCENTAGE;
</script>

<button
Expand Down Expand Up @@ -79,11 +83,11 @@
<Tooltip distance={8} location="bottom" alignment="start">
<div class="w-max">
<WithTween {value} tweenProps={{ duration: 500 }} let:output>
{humanizeDataType(output, formatPreset)}
{measureValueFormatter(output)}
</WithTween>
</div>
<TooltipContent slot="tooltip-content">
{humanizeDataTypeExpanded(value, formatPreset)}
{measureValueFormatterUnabridged(value)}
<TooltipDescription>
the aggregate value over the current time period
</TooltipDescription>
Expand Down Expand Up @@ -134,7 +138,7 @@
{:else}
{TIME_COMPARISON[comparisonOption].shorthand}
<span class="font-semibold">
{humanizeDataType(comparisonValue, formatPreset)}
{measureValueFormatter(comparisonValue)}
</span>
{#if !measureIsPercentage}
<span class="text-gray-300">,</span>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -11,11 +11,7 @@ import type {
V1MetricsViewFilter,
V1MetricsViewToplistResponseDataItem,
} from "../../../runtime-client";
import {
FormatPreset,
formatMeasurePercentageDifference,
humanizeDimTableValue,
} from "../humanize-numbers";

import type { VirtualizedTableColumns } from "@rilldata/web-local/lib/types";
import type { VirtualizedTableConfig } from "@rilldata/web-common/components/virtualized-table/types";

Expand All @@ -25,6 +21,9 @@ import type { DimensionTableRow } from "./dimension-table-types";
import { getFilterForDimension } from "../selectors";
import { SortType } from "../proto-state/derived-types";
import type { MetricsExplorerEntity } from "../stores/metrics-explorer-entity";
import { createMeasureValueFormatter } from "@rilldata/web-common/lib/number-formatting/format-measure-value";
import { FormatPreset } from "@rilldata/web-common/lib/number-formatting/humanizer-types";
import { formatMeasurePercentageDifference } from "@rilldata/web-common/lib/number-formatting/percentage-formatter";

/** Returns an updated filter set for a given dimension on search */
export function updateFilterOnSearch(
Expand Down Expand Up @@ -340,17 +339,20 @@ export function addContextColumnNames(
const sortByColumnIndex = columnNames.indexOf(name);
// Add comparison columns if available
let percentOfTotalSpliceIndex = 1;
const isPercent = selectedMeasure?.formatPreset === FormatPreset.PERCENTAGE;
if (timeComparison) {
percentOfTotalSpliceIndex = 2;
columnNames.splice(sortByColumnIndex + 1, 0, `${name}_delta`);

// Only push percentage delta column if selected measure is not a percentage
if (selectedMeasure?.formatPreset != FormatPreset.PERCENTAGE) {
if (!isPercent) {
percentOfTotalSpliceIndex = 3;
columnNames.splice(sortByColumnIndex + 2, 0, `${name}_delta_perc`);
}
}
if (validPercentOfTotal) {
// Only push percentage-of-total if selected measure is
// validPercentOfTotal and not a percentage
if (validPercentOfTotal && !isPercent) {
columnNames.splice(
sortByColumnIndex + percentOfTotalSpliceIndex,
0,
Expand All @@ -376,8 +378,8 @@ export function prepareDimensionTableRows(
): DimensionTableRow[] {
if (!queryRows || !queryRows.length) return [];

const formatMap = Object.fromEntries(
measures.map((m) => [m.name, m.formatPreset as FormatPreset])
const formattersForMeasures = Object.fromEntries(
measures.map((m) => [m.name, createMeasureValueFormatter(m)])
);

const tableRows: DimensionTableRow[] = queryRows.map((row) => {
Expand All @@ -389,7 +391,7 @@ export function prepareDimensionTableRows(
const formattedVals: [string, string | number][] = row.measureValues.map(
(m) => [
"__formatted_" + m.measureName,
humanizeDimTableValue(m.baseValue as number, formatMap[m.measureName]),
formattersForMeasures[m.measureName](m.baseValue as number),
]
);

Expand All @@ -404,12 +406,11 @@ export function prepareDimensionTableRows(
(m) => m.measureName === activeMeasureName
) as V1MetricsViewComparisonValue;

rowOut[`${activeMeasureName}_delta`] = humanizeDimTableValue(
activeMeasure.deltaAbs as number,
formatMap[activeMeasureName]
);
rowOut[`${activeMeasureName}_delta_perc`] =
formatMeasurePercentageDifference(activeMeasure.deltaRel as number);
(rowOut[`${activeMeasureName}_delta`] = formattersForMeasures[
activeMeasureName
](activeMeasure.deltaAbs as number)),
(rowOut[`${activeMeasureName}_delta_perc`] =
formatMeasurePercentageDifference(activeMeasure.deltaRel as number));
}

if (addPercentOfTotal) {
Expand Down
Loading