-
Notifications
You must be signed in to change notification settings - Fork 31
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #114 from pegasystems/feature/trendDisplay
add new TrendDisplay component
- Loading branch information
Showing
13 changed files
with
1,800 additions
and
338 deletions.
There are no files selected for viewing
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Large diffs are not rendered by default.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,49 @@ | ||
| import { Meta, Primary, Controls, Story } from '@storybook/blocks'; | ||
| import * as DemoStories from './demo.stories'; | ||
|
|
||
| <Meta of={DemoStories} /> | ||
|
|
||
| # Overview | ||
|
|
||
| Trend display.... | ||
|
|
||
| <Primary /> | ||
|
|
||
| ## Props | ||
|
|
||
| <Controls /> | ||
|
|
||
| ## Examples | ||
|
|
||
| This component is a flexible component that can render a currency value or a string using different custom color - It can also display a trend of the value (up or down) as well as render a line chart of multiple pieces of data. | ||
|
|
||
| <Story of={DemoStories.Demo1} /> | ||
|
|
||
| Display a currency or percentage value based on the trend (positive or negative) | ||
|
|
||
| <Story of={DemoStories.Demo2} /> | ||
| <Story of={DemoStories.Demo3} /> | ||
| <Story of={DemoStories.Demo4} /> | ||
| <Story of={DemoStories.Demo5} /> | ||
|
|
||
| Same as before but displayed using renderingMode='badge' | ||
|
|
||
| <Story of={DemoStories.Demo2_badge} /> | ||
| <Story of={DemoStories.Demo3_badge} /> | ||
| <Story of={DemoStories.Demo4_badge} /> | ||
| <Story of={DemoStories.Demo5_badge} /> | ||
|
|
||
| Display values with custom colors | ||
|
|
||
| <Story of={DemoStories.Demo6_1} /> | ||
| <Story of={DemoStories.Demo6_2} /> | ||
|
|
||
| ## Demo | ||
|
|
||
| Here is an example of using the trend display in a list view | ||
|
|
||
|  | ||
|
|
||
| and in a case view summary | ||
|
|
||
|  |
41 changes: 41 additions & 0 deletions
41
src/components/Pega_Extensions_TrendDisplay/TrendGraph.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,41 @@ | ||
| import { buildSmoothPath, normalizeDataset } from './utils'; | ||
|
|
||
| type TrendGraphProps = { | ||
| colorValue: string; | ||
| radius?: number; | ||
| padding?: number; | ||
| data: number[]; | ||
| width?: number; | ||
| height?: number; | ||
| }; | ||
|
|
||
| const TrendGraph = (props: TrendGraphProps) => { | ||
| const { colorValue, radius = 3, padding = 2, width = 300, height = 75, data = [] } = props; | ||
|
|
||
| if (!data || data.length < 2) { | ||
| return null; | ||
| } | ||
|
|
||
| const normalizedValues = normalizeDataset(data, { | ||
| minX: padding, | ||
| maxX: width - padding, | ||
| minY: height - padding, | ||
| maxY: padding | ||
| }); | ||
|
|
||
| const path = buildSmoothPath(normalizedValues, radius); | ||
|
|
||
| return ( | ||
| <svg | ||
| width='120px' | ||
| strokeWidth='1' | ||
| strokeLinecap='butt' | ||
| stroke={colorValue} | ||
| viewBox={`0 0 ${width} ${height}`} | ||
| > | ||
| <path d={path} fill='none' /> | ||
| </svg> | ||
| ); | ||
| }; | ||
|
|
||
| export default TrendGraph; |
237 changes: 237 additions & 0 deletions
237
src/components/Pega_Extensions_TrendDisplay/config.json
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,237 @@ | ||
| { | ||
| "name": "Pega_Extensions_TrendDisplay", | ||
| "label": "Trend Display", | ||
| "description": "Trend Display", | ||
| "organization": "Pega", | ||
| "version": "1.0.0", | ||
| "library": "Extensions", | ||
| "allowedApplications": [], | ||
| "componentKey": "Pega_Extensions_TrendDisplay", | ||
| "type": "Field", | ||
| "subtype": "Decimal-Currency", | ||
| "properties": [ | ||
| { | ||
| "key": "trendData", | ||
| "format": "PROPERTY", | ||
| "name": "trendData", | ||
| "label": "Trend data if showing a percentage or trend of values" | ||
| }, | ||
| { | ||
| "name": "labelOption", | ||
| "label": "Label value", | ||
| "format": "SELECT", | ||
| "defaultValue": "custom", | ||
| "source": [ | ||
| { | ||
| "key": "default", | ||
| "value": "Default" | ||
| }, | ||
| { | ||
| "key": "custom", | ||
| "value": "Custom" | ||
| } | ||
| ] | ||
| }, | ||
| { | ||
| "name": "label", | ||
| "label": "Custom label value", | ||
| "format": "VALUEINPUT", | ||
| "required": true, | ||
| "ruleType": "Paragraph" | ||
| }, | ||
| { | ||
| "format": "CASCADE", | ||
| "source": { | ||
| "format": "SELECT", | ||
| "label": "ISO Code Selection", | ||
| "name": "isoCodeSelection", | ||
| "defaultValue": "constant", | ||
| "source": [ | ||
| { | ||
| "key": "constant", | ||
| "value": "Constant" | ||
| }, | ||
| { | ||
| "key": "propertyRef", | ||
| "value": "Property Reference" | ||
| } | ||
| ] | ||
| }, | ||
| "cascadeElements": [ | ||
| { | ||
| "key": "currencyISOCode", | ||
| "format": "TEXT", | ||
| "name": "currencyISOCode", | ||
| "label": "Currency ISO Code", | ||
| "defaultValue": "USD", | ||
| "match": "constant" | ||
| }, | ||
| { | ||
| "key": "currencyISOCode", | ||
| "format": "PROPERTY", | ||
| "name": "currencyISOCode", | ||
| "label": "Currency ISO Code", | ||
| "match": "propertyRef" | ||
| } | ||
| ] | ||
| }, | ||
| { | ||
| "format": "CASCADE", | ||
| "source": { | ||
| "format": "SELECT", | ||
| "label": "Color selection", | ||
| "name": "ColorSelection", | ||
| "defaultValue": "constant", | ||
| "source": [ | ||
| { | ||
| "key": "constant", | ||
| "value": "Constant" | ||
| }, | ||
| { | ||
| "key": "propertyRef", | ||
| "value": "Property Reference" | ||
| } | ||
| ] | ||
| }, | ||
| "cascadeElements": [ | ||
| { | ||
| "key": "colorMode", | ||
| "format": "TEXT", | ||
| "name": "colorMode", | ||
| "label": "Color Mode", | ||
| "defaultValue": "auto", | ||
| "match": "constant" | ||
| }, | ||
| { | ||
| "key": "colorMode", | ||
| "format": "PROPERTY", | ||
| "name": "colorMode", | ||
| "label": "Color Mode", | ||
| "match": "propertyRef" | ||
| } | ||
| ] | ||
| }, | ||
| { | ||
| "format": "SELECT", | ||
| "name": "renderingMode", | ||
| "label": "renderingMode", | ||
| "defaultValue": "normal", | ||
| "source": [ | ||
| { | ||
| "key": "normal", | ||
| "value": "normal" | ||
| }, | ||
| { | ||
| "key": "badge", | ||
| "value": "badge" | ||
| } | ||
| ] | ||
| }, | ||
| { | ||
| "label": "Formatting", | ||
| "format": "GROUP", | ||
| "properties": [ | ||
| { | ||
| "format": "SELECT", | ||
| "name": "currencyDisplay", | ||
| "label": "Currency display", | ||
| "defaultValue": "symbol", | ||
| "source": [ | ||
| { | ||
| "key": "symbol", | ||
| "value": "Auto" | ||
| }, | ||
| { | ||
| "key": "code", | ||
| "value": "Code" | ||
| }, | ||
| { | ||
| "key": "name", | ||
| "value": "Name" | ||
| } | ||
| ] | ||
| }, | ||
| { | ||
| "format": "SELECT", | ||
| "name": "negative", | ||
| "label": "Negative number display", | ||
| "defaultValue": "minus-sign", | ||
| "source": [ | ||
| { | ||
| "key": "minus-sign", | ||
| "value": "Standard" | ||
| }, | ||
| { | ||
| "key": "parentheses", | ||
| "value": "Accounting" | ||
| } | ||
| ] | ||
| }, | ||
| { | ||
| "format": "SELECT", | ||
| "name": "notation", | ||
| "label": "Notation", | ||
| "visibility": "(!negative = parentheses)", | ||
| "defaultValue": "standard", | ||
| "source": [ | ||
| { | ||
| "key": "standard", | ||
| "value": "Standard" | ||
| }, | ||
| { | ||
| "key": "compact", | ||
| "value": "Compact" | ||
| } | ||
| ] | ||
| }, | ||
| { | ||
| "format": "SELECT", | ||
| "name": "currencyDecimalPrecision", | ||
| "label": "Decimal places shown", | ||
| "defaultValue": "auto", | ||
| "source": [ | ||
| { | ||
| "key": "auto", | ||
| "value": "Auto" | ||
| }, | ||
| { | ||
| "key": "0", | ||
| "value": "None" | ||
| }, | ||
| { | ||
| "key": "1", | ||
| "value": "1" | ||
| }, | ||
| { | ||
| "key": "2", | ||
| "value": "2" | ||
| }, | ||
| { | ||
| "key": "3", | ||
| "value": "3" | ||
| }, | ||
| { | ||
| "key": "4", | ||
| "value": "4" | ||
| } | ||
| ] | ||
| } | ||
| ] | ||
| }, | ||
| { | ||
| "label": "Conditions", | ||
| "format": "GROUP", | ||
| "properties": [ | ||
| { | ||
| "name": "visibility", | ||
| "label": "Visibility", | ||
| "format": "VISIBILITY" | ||
| } | ||
| ] | ||
| } | ||
| ], | ||
| "defaultConfig": { | ||
| "label": "@L $this.label", | ||
| "detailFVLItem": true | ||
| } | ||
| } |
Oops, something went wrong.