Thanks to visit codestin.com
Credit goes to github.com

Skip to content

feat: improve canvas chart legend #7223

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

Open
wants to merge 58 commits into
base: main
Choose a base branch
from
Open

Conversation

djbarnwal
Copy link
Member

@djbarnwal djbarnwal commented Apr 28, 2025

Add multiple improvements to chart legends -

  1. Add selector for choosing legend orientation
  2. Add symbol limit when legend is placed vertically
  3. Add column limit when legend is placed horizontally
  4. Center align all legend types for circular charts
  5. Add a config wrapper util method.

Checklist:

  • Covered by tests
  • Ran it and it works as intended
  • Reviewed the diff before requesting a review
  • Checked for unhandled edge cases
  • Linked the issues it closes
  • Checked if the docs need to be updated
  • Intend to cherry-pick into the release branch
  • I'm proud of this work!

Base automatically changed from feat/donut-chart to main April 29, 2025 10:44
@djbarnwal djbarnwal self-assigned this Apr 29, 2025
Copy link

bito-code-review bot commented Apr 30, 2025

Code Review Agent Run #109c17

Actionable Suggestions - 2
  • web-common/src/features/canvas/inspector/chart/MarkSelector.svelte - 1
    • Missing case handling in updateFieldConfig function · Line 24-37
  • web-common/src/features/canvas/components/charts/types.ts - 1
    • Property moved to type-specific interface restricts usage · Line 55-74
Review Details
  • Files reviewed - 16 · Commit Range: 34554e0..2278216
    • web-common/src/features/canvas/components/charts/builder.ts
    • web-common/src/features/canvas/components/charts/cartesian-charts/CartesianChart.ts
    • web-common/src/features/canvas/components/charts/cartesian-charts/area/spec.ts
    • web-common/src/features/canvas/components/charts/cartesian-charts/bar-chart/spec.ts
    • web-common/src/features/canvas/components/charts/cartesian-charts/line-chart/spec.ts
    • web-common/src/features/canvas/components/charts/cartesian-charts/stacked-bar/default.ts
    • web-common/src/features/canvas/components/charts/cartesian-charts/stacked-bar/normalized.ts
    • web-common/src/features/canvas/components/charts/circular-charts/CircularChart.ts
    • web-common/src/features/canvas/components/charts/circular-charts/pie.ts
    • web-common/src/features/canvas/components/charts/heatmap-charts/HeatmapChart.ts
    • web-common/src/features/canvas/components/charts/heatmap-charts/spec.ts
    • web-common/src/features/canvas/components/charts/types.ts
    • web-common/src/features/canvas/inspector/ParamMapper.svelte
    • web-common/src/features/canvas/inspector/chart/FieldConfigDropdown.svelte
    • web-common/src/features/canvas/inspector/chart/MarkSelector.svelte
    • web-common/src/features/canvas/inspector/types.ts
  • Files skipped - 0
  • Tools
    • Whispers (Secret Scanner) - ✔︎ Successful
    • Detect-secrets (Secret Scanner) - ✔︎ Successful

AI Code Review powered by Bito Logo

Comment on lines +24 to 37
function updateFieldConfig(property: keyof FieldConfig, value: any) {
if (typeof markConfig !== "string") {
const updatedConfig: FieldConfig = {
...markConfig,
[property]: value,
};
onChange(updatedConfig);
} else if (property === "field") {
onChange({
field: value,
type: "nominal",
});
}
}

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Missing case handling in updateFieldConfig function

The updateFieldConfig function has been refactored to handle both string and object types for markConfig, but the implementation creates a potential issue when property is not 'field' and markConfig is a string. This case isn't handled, which could lead to unexpected behavior.

Code suggestion
Check the AI-generated fix before applying
Suggested change
function updateFieldConfig(property: keyof FieldConfig, value: any) {
if (typeof markConfig !== "string") {
const updatedConfig: FieldConfig = {
...markConfig,
[property]: value,
};
onChange(updatedConfig);
} else if (property === "field") {
onChange({
field: value,
type: "nominal",
});
}
}
function updateFieldConfig(property: keyof FieldConfig, value: any) {
if (typeof markConfig !== "string") {
const updatedConfig: FieldConfig = {
...markConfig,
[property]: value,
};
onChange(updatedConfig);
} else if (property === "field") {
onChange({
field: value,
type: "nominal",
});
} else {
// Handle case where property is not 'field' but markConfig is a string
console.warn(`Cannot update ${property} when markConfig is a string`);
}
}

Code Review Run #109c17


Should Bito avoid suggestions like this for future reviews? (Manage Rules)

  • Yes, avoid them

Comment on lines +55 to 74
interface NominalFieldConfig {
sort?: ChartSortDirection;
limit?: number;
showNull?: boolean;
labelAngle?: number;
legendOrientation?: ChartLegend;
}

interface QuantitativeFieldConfig {
zeroBasedOrigin?: boolean; // Default is false
}

export interface FieldConfig
extends NominalFieldConfig,
QuantitativeFieldConfig {
field: string;
type: "quantitative" | "ordinal" | "nominal" | "temporal";
showAxisTitle?: boolean; // Default is false
timeUnit?: string; // For temporal fields
}

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Property moved to type-specific interface restricts usage

The FieldConfig interface has been refactored into separate interfaces with specific properties, but zeroBasedOrigin is now only in QuantitativeFieldConfig which may cause issues when used with non-quantitative field types.

Code suggestion
Check the AI-generated fix before applying
 @@ -63,12 +63,13 @@
  +
  +interface QuantitativeFieldConfig {
 -+  zeroBasedOrigin?: boolean; // Default is false
  +}
  +
  +export interface FieldConfig
  +  extends NominalFieldConfig,
  +    QuantitativeFieldConfig {
  +  field: string;
  +  type: "quantitative" | "ordinal" | "nominal" | "temporal";
  +  showAxisTitle?: boolean; // Default is false
 ++  zeroBasedOrigin?: boolean; // Default is false
  +  timeUnit?: string; // For temporal fields

Code Review Run #109c17


Should Bito avoid suggestions like this for future reviews? (Manage Rules)

  • Yes, avoid them

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

1 participant