Add support for negative bars on bar chart (#15418)
in app: <img width="580" height="591" alt="Screenshot 2025-10-29 at 01 47 51" src="https://github.com/user-attachments/assets/9e16a597-6367-454d-a726-668beac90e04" /> <img width="747" height="582" alt="Screenshot 2025-10-29 at 02 30 15" src="https://github.com/user-attachments/assets/d06eb443-16ac-4394-bf4f-e6063f1ac12f" /> new stories: <img width="569" height="359" alt="Screenshot 2025-10-29 at 01 46 50" src="https://github.com/user-attachments/assets/a4cd33e2-3f15-4b8d-8849-c2d990246dec" /> <img width="564" height="360" alt="Screenshot 2025-10-29 at 01 46 45" src="https://github.com/user-attachments/assets/014a2110-53e4-4f99-afda-1d8c5412a815" /> <img width="604" height="372" alt="Screenshot 2025-10-29 at 01 46 40" src="https://github.com/user-attachments/assets/bf7a73b4-fe29-40b7-b1a0-2894d5cbeccf" /> <img width="635" height="395" alt="Screenshot 2025-10-29 at 01 46 34" src="https://github.com/user-attachments/assets/3cdfd3b9-dc76-4cf2-98e5-8e2a74e02ac6" /> <img width="652" height="408" alt="Screenshot 2025-10-29 at 01 46 30" src="https://github.com/user-attachments/assets/c2837d8d-371f-44ac-b66b-8f41ba69245e" />
This commit is contained in:
nitin
+245
-1
@@ -494,6 +494,248 @@ export const Currency: Story = {
|
||||
),
|
||||
};
|
||||
|
||||
export const NegativeValues: Story = {
|
||||
args: {
|
||||
data: [
|
||||
{ quarter: 'Q1', profit: -50000, to: '/financials/q1' },
|
||||
{ quarter: 'Q2', profit: -20000, to: '/financials/q2' },
|
||||
{ quarter: 'Q3', profit: 10000, to: '/financials/q3' },
|
||||
{ quarter: 'Q4', profit: 80000, to: '/financials/q4' },
|
||||
],
|
||||
indexBy: 'quarter',
|
||||
keys: ['profit'],
|
||||
seriesLabels: {
|
||||
profit: 'Net Profit',
|
||||
},
|
||||
displayType: 'shortNumber',
|
||||
prefix: '$',
|
||||
showLegend: false,
|
||||
showGrid: true,
|
||||
xAxisLabel: 'Quarter',
|
||||
yAxisLabel: 'Profit/Loss ($)',
|
||||
id: 'bar-chart-negative',
|
||||
},
|
||||
render: (args) => (
|
||||
<Container>
|
||||
<GraphWidgetBarChart
|
||||
data={args.data}
|
||||
indexBy={args.indexBy}
|
||||
keys={args.keys}
|
||||
seriesLabels={args.seriesLabels}
|
||||
displayType={args.displayType}
|
||||
prefix={args.prefix}
|
||||
showLegend={args.showLegend}
|
||||
showGrid={args.showGrid}
|
||||
xAxisLabel={args.xAxisLabel}
|
||||
yAxisLabel={args.yAxisLabel}
|
||||
id={args.id}
|
||||
/>
|
||||
</Container>
|
||||
),
|
||||
};
|
||||
|
||||
export const MixedPositiveNegative: Story = {
|
||||
args: {
|
||||
data: [
|
||||
{
|
||||
month: 'Jan',
|
||||
revenue: 120000,
|
||||
expenses: -80000,
|
||||
net: 40000,
|
||||
to: '/reports/jan',
|
||||
},
|
||||
{
|
||||
month: 'Feb',
|
||||
revenue: 150000,
|
||||
expenses: -95000,
|
||||
net: 55000,
|
||||
to: '/reports/feb',
|
||||
},
|
||||
{
|
||||
month: 'Mar',
|
||||
revenue: 130000,
|
||||
expenses: -140000,
|
||||
net: -10000,
|
||||
to: '/reports/mar',
|
||||
},
|
||||
{
|
||||
month: 'Apr',
|
||||
revenue: 180000,
|
||||
expenses: -110000,
|
||||
net: 70000,
|
||||
to: '/reports/apr',
|
||||
},
|
||||
],
|
||||
indexBy: 'month',
|
||||
keys: ['revenue', 'expenses', 'net'],
|
||||
seriesLabels: {
|
||||
revenue: 'Revenue',
|
||||
expenses: 'Expenses',
|
||||
net: 'Net Income',
|
||||
},
|
||||
displayType: 'shortNumber',
|
||||
prefix: '$',
|
||||
showLegend: true,
|
||||
showGrid: true,
|
||||
xAxisLabel: 'Month',
|
||||
yAxisLabel: 'Amount ($)',
|
||||
id: 'bar-chart-mixed-values',
|
||||
},
|
||||
render: (args) => (
|
||||
<Container>
|
||||
<GraphWidgetBarChart
|
||||
data={args.data}
|
||||
indexBy={args.indexBy}
|
||||
keys={args.keys}
|
||||
seriesLabels={args.seriesLabels}
|
||||
displayType={args.displayType}
|
||||
prefix={args.prefix}
|
||||
showLegend={args.showLegend}
|
||||
showGrid={args.showGrid}
|
||||
xAxisLabel={args.xAxisLabel}
|
||||
yAxisLabel={args.yAxisLabel}
|
||||
id={args.id}
|
||||
/>
|
||||
</Container>
|
||||
),
|
||||
};
|
||||
|
||||
export const AllNegative: Story = {
|
||||
args: {
|
||||
data: [
|
||||
{ category: 'Loss A', value: -45, to: '/losses/a' },
|
||||
{ category: 'Loss B', value: -30, to: '/losses/b' },
|
||||
{ category: 'Loss C', value: -60, to: '/losses/c' },
|
||||
{ category: 'Loss D', value: -25, to: '/losses/d' },
|
||||
],
|
||||
indexBy: 'category',
|
||||
keys: ['value'],
|
||||
showLegend: false,
|
||||
showGrid: true,
|
||||
xAxisLabel: 'Category',
|
||||
yAxisLabel: 'Value',
|
||||
id: 'bar-chart-all-negative',
|
||||
},
|
||||
render: (args) => (
|
||||
<Container>
|
||||
<GraphWidgetBarChart
|
||||
data={args.data}
|
||||
indexBy={args.indexBy}
|
||||
keys={args.keys}
|
||||
showLegend={args.showLegend}
|
||||
showGrid={args.showGrid}
|
||||
xAxisLabel={args.xAxisLabel}
|
||||
yAxisLabel={args.yAxisLabel}
|
||||
id={args.id}
|
||||
/>
|
||||
</Container>
|
||||
),
|
||||
};
|
||||
|
||||
export const TemperatureData: Story = {
|
||||
args: {
|
||||
data: [
|
||||
{ month: 'Jan', temp: -5, to: '/weather/jan' },
|
||||
{ month: 'Feb', temp: -2, to: '/weather/feb' },
|
||||
{ month: 'Mar', temp: 5, to: '/weather/mar' },
|
||||
{ month: 'Apr', temp: 15, to: '/weather/apr' },
|
||||
{ month: 'May', temp: 22, to: '/weather/may' },
|
||||
{ month: 'Jun', temp: 28, to: '/weather/jun' },
|
||||
],
|
||||
indexBy: 'month',
|
||||
keys: ['temp'],
|
||||
showLegend: false,
|
||||
showGrid: true,
|
||||
xAxisLabel: 'Month',
|
||||
yAxisLabel: 'Temperature',
|
||||
suffix: '°C',
|
||||
id: 'bar-chart-temperature',
|
||||
},
|
||||
render: (args) => (
|
||||
<Container>
|
||||
<GraphWidgetBarChart
|
||||
data={args.data}
|
||||
indexBy={args.indexBy}
|
||||
keys={args.keys}
|
||||
showLegend={args.showLegend}
|
||||
showGrid={args.showGrid}
|
||||
xAxisLabel={args.xAxisLabel}
|
||||
yAxisLabel={args.yAxisLabel}
|
||||
suffix={args.suffix}
|
||||
id={args.id}
|
||||
/>
|
||||
</Container>
|
||||
),
|
||||
};
|
||||
|
||||
export const StackedNegative: Story = {
|
||||
args: {
|
||||
data: [
|
||||
{
|
||||
period: 'Q1',
|
||||
profit: 50000,
|
||||
loss: -30000,
|
||||
adjustment: -5000,
|
||||
to: '/periods/q1',
|
||||
},
|
||||
{
|
||||
period: 'Q2',
|
||||
profit: 70000,
|
||||
loss: -40000,
|
||||
adjustment: 10000,
|
||||
to: '/periods/q2',
|
||||
},
|
||||
{
|
||||
period: 'Q3',
|
||||
profit: 60000,
|
||||
loss: -25000,
|
||||
adjustment: -8000,
|
||||
to: '/periods/q3',
|
||||
},
|
||||
{
|
||||
period: 'Q4',
|
||||
profit: 90000,
|
||||
loss: -35000,
|
||||
adjustment: 15000,
|
||||
to: '/periods/q4',
|
||||
},
|
||||
],
|
||||
indexBy: 'period',
|
||||
keys: ['profit', 'loss', 'adjustment'],
|
||||
seriesLabels: {
|
||||
profit: 'Profit',
|
||||
loss: 'Loss',
|
||||
adjustment: 'Adjustment',
|
||||
},
|
||||
groupMode: 'stacked',
|
||||
displayType: 'shortNumber',
|
||||
prefix: '$',
|
||||
showLegend: true,
|
||||
showGrid: true,
|
||||
xAxisLabel: 'Period',
|
||||
yAxisLabel: 'Amount ($)',
|
||||
id: 'bar-chart-stacked-negative',
|
||||
},
|
||||
render: (args) => (
|
||||
<Container>
|
||||
<GraphWidgetBarChart
|
||||
data={args.data}
|
||||
indexBy={args.indexBy}
|
||||
keys={args.keys}
|
||||
seriesLabels={args.seriesLabels}
|
||||
groupMode={args.groupMode}
|
||||
displayType={args.displayType}
|
||||
prefix={args.prefix}
|
||||
showLegend={args.showLegend}
|
||||
showGrid={args.showGrid}
|
||||
xAxisLabel={args.xAxisLabel}
|
||||
yAxisLabel={args.yAxisLabel}
|
||||
id={args.id}
|
||||
/>
|
||||
</Container>
|
||||
),
|
||||
};
|
||||
|
||||
export const GroupedWithAllBarsTooltip: Story = {
|
||||
args: {
|
||||
data: [
|
||||
@@ -659,7 +901,9 @@ export const Catalog: Story = {
|
||||
groupMode={args.groupMode}
|
||||
showLegend={true}
|
||||
showGrid={true}
|
||||
id={args.id}
|
||||
id={`bar-chart-catalog-${args.keys?.length ?? 0}-${
|
||||
args.groupMode ?? 'grouped'
|
||||
}`}
|
||||
/>
|
||||
</Container>
|
||||
),
|
||||
|
||||
Reference in New Issue
Block a user