feat: added logarithmic scale for panels

[SagarRajput-7]

Logarithmic Scale for Panels

Summary

This PR adds logarithmic scale support for time series and bar chart panels in SigNoz. Users can now toggle between linear and logarithmic scales for the Y-axis, enabling better visualization of data with wide value ranges.

Benefits of Logarithmic Scale

• Visualize Wide Value Ranges: Display data that spans several orders of magnitude in a single view
• Highlight Small Values: Make smaller values visible when they would otherwise be dwarfed by large values
• Exponential Patterns: Clearly visualize exponential growth
• Monitoring Metrics: Particularly useful for performance metrics, latencies, memory usage, etc. that can vary by orders of magnitude

Implementation Details

• Added a Y-axis scale toggle in the panel configuration UI (Linear/Logarithmic)
• Implemented proper scale transformation using uPlot's distribution modes
• Adjusted grid density and formatting for optimal logarithmic display
• Preserved chart readability with appropriate spacing and axis labelling

Related Issues / PR's

• Logarithmic value axis on Time Series #6207

Screenshots

Before	After

---

Before	After

New Behaviour

Screen.Recording.2025-03-24.at.1.34.12.AM.mov

Affected Areas and Manually Tested Areas

• Support added in Time series and Bar Panels behind the isLogScale boolean under the dashboard

---

Important

Adds logarithmic scale option for TIME_SERIES and BAR panels, updating UI, state management, and chart rendering.

• Behavior:
  • Adds logarithmic scale option for TIME_SERIES and BAR panel types in RightContainer.
  • Updates UplotPanelWrapper to handle isLogScale for chart rendering.
• State Management:
  • Introduces isLogScale state in NewWidget and RightContainer components.
  • Updates panelTypeVsLogScale in constants.ts to define supported panel types.
• UI Components:
  • Adds log-scale section in RightContainer for selecting Y Axis scale.
  • Updates getAxes in getAxes.ts to adjust grid line width and spacing for logarithmic scale.
• Misc:
  • Updates getUplotChartOptions to include isLogScale in chart options.
  • Modifies IBaseWidget interface in getAll.ts to include isLogScale property.

^{This description was created by for 27db432. It will automatically update as commits are pushed.}

[ellipsis-dev]

❌ Changes requested. Reviewed everything up to 27db432 in 2 minutes and 39 seconds

More details

• Looked at 326 lines of code in 8 files
• Skipped 0 files when reviewing.
• Skipped posting 10 drafted comments based on config settings.

1. frontend/src/lib/uPlotLib/getUplotChartOptions.ts:248

• Draft comment:
  Hardcoded color ('white') in canvas drawing; consider using design tokens or predefined color constants for consistency.
• Reason this comment was not posted:
  Comment was not on a location in the diff, so it can't be submitted as a review comment.

2. frontend/src/lib/uPlotLib/utils/getAxes.ts:29

• Draft comment:
  Avoid hardcoded colors ('white'/'black'); use design tokens or predefined color constants for theme consistency.
• Reason this comment was not posted:
  Comment was on unchanged code.

3. frontend/src/container/NewWidget/RightContainer/index.tsx:310

• Draft comment:
  Avoid using inline styles (e.g. width: '100%'). Consider moving these to a CSS class to ensure design consistency.
• Reason this comment was not posted:
  Marked as duplicate.

4. frontend/src/lib/uPlotLib/getUplotChartOptions.ts:225

• Draft comment:
  Using magic numbers (3 for logarithmic distribution and 1 for linear) makes the code less clear. Consider extracting these values as named constants or using design tokens for clarity.
• Reason this comment was not posted:
  Decided after close inspection that this draft comment was likely wrong and/or not actionable: usefulness confidence = 20% vs. threshold = 50%
  The numbers 1 and 3 are uPlot-specific configuration values that represent linear and logarithmic distributions. While extracting constants could add clarity, these values are standard uPlot configurations that are unlikely to change. The ternary expression is already quite readable with the isLogScale boolean making the intent clear. The comment seems to be applying a general programming principle without strong justification in this specific case.
  The comment has merit from a general code quality perspective - magic numbers should usually be constants. Also, future maintainers might not know what these uPlot values mean.
  However, these are standard uPlot configuration values that are well-documented and unlikely to change. The boolean variable name isLogScale already provides good context for what these values represent.
  The comment should be deleted as it suggests a refactor that would add unnecessary complexity without significant benefit to code clarity or maintainability.

5. frontend/src/lib/uPlotLib/getUplotChartOptions.ts:3

• Draft comment:
  The file disables TypeScript checking via '@ts-nocheck'. It’s best to address type errors instead of disabling type checking to ensure long-term maintainability.
• Reason this comment was not posted:
  Comment was not on a location in the diff, so it can't be submitted as a review comment.

6. frontend/src/types/api/dashboard/getAll.ts:109

• Draft comment:
  New property 'isLogScale' is added. Confirm that it integrates well with existing widget data and type-checking across the app.
• Reason this comment was not posted:
  Confidence changes required: 20% <= threshold 50%
  None

7. frontend/src/container/NewWidget/RightContainer/index.tsx:39

• Draft comment:
  Typographical error: The import 'timePreferance' appears to be misspelled. It is likely intended to be 'timePreference' for consistency with other parts of the code and typical naming conventions.
• Reason this comment was not posted:
  Comment was not on a location in the diff, so it can't be submitted as a review comment.

8. frontend/src/container/NewWidget/index.tsx:25

• Draft comment:
  Typo: The import path 'lib/dashbaordVariables/getDashboardVariables' appears to have a misspelling. Consider renaming 'dashbaordVariables' to 'dashboardVariables'.
• Reason this comment was not posted:
  Comment was not on a location in the diff, so it can't be submitted as a review comment.

9. frontend/src/container/NewWidget/index.tsx:53

• Draft comment:
  Typo: The identifier 'timePreferance' appears to be misspelled. It likely should be 'timePreference' to align with standard spelling.
• Reason this comment was not posted:
  Comment was not on a location in the diff, so it can't be submitted as a review comment.

10. frontend/src/types/api/dashboard/getAll.ts:97

• Draft comment:
  Typographical error: The property name 'timePreferance' appears to be misspelled. Consider renaming it to 'timePreference' to maintain consistency with the imported type and common spelling.
• Reason this comment was not posted:
  Comment was not on a location in the diff, so it can't be submitted as a review comment.

Workflow ID: wflow_YCZnOrU6pJTOSPWX

---

Want Ellipsis to fix these issues? Tag @ellipsis-dev in a comment. You can customize Ellipsis with 👍 / 👎 feedback, review rules, user-specific overrides, quiet mode, and more.