Skip to content

feat: add combo bar chart #7834

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.

Sign up for GitHub

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

Closed
wants to merge 9 commits into from
Closed

feat: add combo bar chart #7834

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
d2cbaf4
init combo chart
djbarnwal Aug 26, 2025
52ca150
support color mapping and legends
djbarnwal Aug 26, 2025
0ea87e8
maintain orientation position
djbarnwal Aug 26, 2025
7e3786d
support sorting with y1
djbarnwal Aug 26, 2025
b7e0cbf
add color mapping to combo tooltips
djbarnwal Aug 26, 2025
88a3a40
fix legend
djbarnwal Aug 26, 2025
b4b4807
exclude selected values from other measure field
djbarnwal Aug 26, 2025
88ecb6e
fix stability issues
djbarnwal Aug 27, 2025
c5858b2
ux improvements
djbarnwal Aug 27, 2025
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
3 changes: 2 additions & 1 deletion web-common/src/components/vega/VegaLiteRenderer.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
<script lang="ts">
import CancelCircle from "@rilldata/web-common/components/icons/CancelCircle.svelte";
import type { ColorMapping } from "@rilldata/web-common/features/canvas/inspector/types";
import { onDestroy } from "svelte";
import {
type SignalListeners,
Expand All @@ -23,7 +24,7 @@
export let theme: "light" | "dark" = "light";
export let config: Config | undefined = undefined;
export let tooltipFormatter: VLTooltipFormatter | undefined = undefined;
export let colorMapping: { value: string; color: string }[] = [];
export let colorMapping: ColorMapping = [];
export let viewVL: View;

let contentRect = new DOMRect(0, 0, 0, 0);
Expand Down
11 changes: 5 additions & 6 deletions web-common/src/components/vega/vega-embed-options.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
import type { ColorMapping } from "@rilldata/web-common/features/canvas/inspector/types";
import { runtime } from "@rilldata/web-common/runtime-client/runtime-store";
import type { EmbedOptions } from "svelte-vega";
import { get } from "svelte/store";
Expand All @@ -15,7 +16,7 @@ export interface CreateEmbedOptionsParams {
theme?: "light" | "dark";
expressionFunctions?: ExpressionFunction;
useExpressionInterpreter?: boolean;
colorMapping: { value: string; color: string }[];
colorMapping: ColorMapping;
}

export function createEmbedOptions({
Expand All @@ -36,7 +37,7 @@ export function createEmbedOptions({
renderer,
tooltip: {
theme: theme,
...(colorMapping.length
...(colorMapping?.length
? { formatTooltip: getTooltipFormatter(colorMapping) }
: {}),
},
Expand Down Expand Up @@ -64,14 +65,12 @@ export function createEmbedOptions({
};
}

export function getTooltipFormatter(
colorMapping: { value: string; color: string }[],
) {
export function getTooltipFormatter(colorMapping: ColorMapping) {
return (items: any, sanitize: (value: any) => string) => {
const rows = Object.entries(items)
.map(([key, val]) => {
if (val === undefined) return "";
const colorEntry = colorMapping.find(
const colorEntry = colorMapping?.find(
(mapping) => mapping.value === key,
);
const keyColor = colorEntry
Expand Down
Loading