sag_components 1.0.28 → 1.0.29

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (45) hide show
  1. package/package.json +1 -1
  2. package/.storybook/YourTheme.js +0 -11
  3. package/.storybook/main.js +0 -30
  4. package/.storybook/manager.js +0 -8
  5. package/.storybook/preview.js +0 -14
  6. package/.storybook/webpack.config.js +0 -16
  7. package/public/favicon.ico +0 -0
  8. package/public/index.html +0 -52
  9. package/public/manifest.json +0 -25
  10. package/public/robots.txt +0 -3
  11. package/src/App.css +0 -6
  12. package/src/App.js +0 -149
  13. package/src/App.test.js +0 -8
  14. package/src/index.css +0 -13
  15. package/src/index.js +0 -22
  16. package/src/logo.svg +0 -1
  17. package/src/stories/Benchmark.stories.jsx +0 -111
  18. package/src/stories/Benchmark.style.js +0 -82
  19. package/src/stories/Button.stories.js +0 -114
  20. package/src/stories/Button.style.js +0 -9
  21. package/src/stories/Dropdown.stories.jsx +0 -238
  22. package/src/stories/Dropdown.style.js +0 -9
  23. package/src/stories/Introduction.mdx +0 -119
  24. package/src/stories/OneColumnContainer.stories.js +0 -20
  25. package/src/stories/OneColumnContainer.style.js +0 -41
  26. package/src/stories/SegmentedButton.stories.js +0 -205
  27. package/src/stories/SegmentedButton.style.js +0 -76
  28. package/src/stories/TotalDoughnutChart.stories.js +0 -112
  29. package/src/stories/TotalDoughnutChart.style.js +0 -143
  30. package/src/stories/assets/code-brackets.svg +0 -1
  31. package/src/stories/assets/colors.svg +0 -1
  32. package/src/stories/assets/comments.svg +0 -1
  33. package/src/stories/assets/direction.svg +0 -1
  34. package/src/stories/assets/flow.svg +0 -1
  35. package/src/stories/assets/info.svg +0 -1
  36. package/src/stories/assets/plugin.svg +0 -1
  37. package/src/stories/assets/repo.svg +0 -1
  38. package/src/stories/assets/stackalt.svg +0 -1
  39. package/src/stories/components/Benchmark.jsx +0 -75
  40. package/src/stories/components/Button.jsx +0 -54
  41. package/src/stories/components/Dropdown.jsx +0 -249
  42. package/src/stories/components/InfoIcon.jsx +0 -9
  43. package/src/stories/components/OneColumnContainer.jsx +0 -46
  44. package/src/stories/components/SegmentedButton.jsx +0 -110
  45. package/src/stories/components/TotalDoughnutChart.jsx +0 -178
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "sag_components",
3
- "version": "1.0.28",
3
+ "version": "1.0.29",
4
4
  "description": "",
5
5
  "main": "dist/index.js",
6
6
  "scripts": {
package/.storybook/YourTheme.js DELETED
@@ -1,11 +0,0 @@
1
- // .storybook/YourTheme.js
2
-
3
- import { create } from "@storybook/theming";
4
-
5
- export default create({
6
- base: "light",
7
- brandTitle: "Sagramata storybook",
8
- brandUrl: "https://www.sag121.com/",
9
- brandImage: "https://www.sag121.com/wp-content/uploads/2022/09/logo-1.svg",
10
- brandTarget: "_self",
11
- });
package/.storybook/main.js DELETED
@@ -1,30 +0,0 @@
1
- /** @type { import('@storybook/react-webpack5').StorybookConfig } */
2
- const config = {
3
- stories: ["../src/stories/**/*.mdx", "../src/stories/**/*.stories.@(js|jsx|ts|tsx)"],
4
- addons: [
5
- "@storybook/addon-links",
6
- "@storybook/addon-essentials",
7
- "@storybook/addon-interactions",
8
- {
9
- name: '@storybook/addon-storysource',
10
- options: {
11
- rule: {
12
- test: [/\.stories\.jsx?$/], //This is default
13
- //include: [path.resolve(__dirname, '../stories')], // You can specify directories
14
- },
15
- loaderOptions: {
16
- prettierConfig: { printWidth: 80, singleQuote: false },
17
- injectStoryParameters: false,
18
- },
19
- },
20
- },
21
- ],
22
- framework: {
23
- name: "@storybook/react-webpack5",
24
- options: {},
25
- },
26
- docs: {
27
- autodocs: "tag",
28
- },
29
- };
30
- export default config;
package/.storybook/manager.js DELETED
@@ -1,8 +0,0 @@
1
- // .storybook/manager.js
2
-
3
- import { addons } from "@storybook/addons";
4
- import yourTheme from "./YourTheme";
5
-
6
- addons.setConfig({
7
- theme: yourTheme,
8
- });
package/.storybook/preview.js DELETED
@@ -1,14 +0,0 @@
1
- /** @type { import('@storybook/react').Preview } */
2
- const preview = {
3
- parameters: {
4
- actions: { argTypesRegex: "^on[A-Z].*" },
5
- controls: {
6
- matchers: {
7
- color: /(background|color)$/i,
8
- date: /Date$/,
9
- },
10
- },
11
- },
12
- };
13
-
14
- export default preview;
package/.storybook/webpack.config.js DELETED
@@ -1,16 +0,0 @@
1
- module.exports = {
2
- module: {
3
- rules: [
4
- {
5
- test: /\.svg$/,
6
- use: ['@svgr/webpack']
7
- },
8
- {
9
- test: /\.inline.svg$/,
10
- loader: 'svg-react-loader'
11
- }
12
- ]
13
- }
14
- }
15
-
16
-
package/public/favicon.ico DELETED
Binary file
package/public/index.html DELETED
@@ -1,52 +0,0 @@
1
- <!DOCTYPE html>
2
- <html lang="en">
3
- <head>
4
- <meta charset="utf-8" />
5
- <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
6
- <meta name="viewport" content="width=device-width, initial-scale=1" />
7
- <meta name="theme-color" content="#000000" />
8
- <meta
9
- name="description"
10
- content="Web site created using create-react-app"
11
- />
12
- <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
13
- <!--
14
- manifest.json provides metadata used when your web app is installed on a
15
- user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
16
- -->
17
- <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
18
- <!--
19
- Notice the use of %PUBLIC_URL% in the tags above.
20
- It will be replaced with the URL of the `public` folder during the build.
21
- Only files inside the `public` folder can be referenced from the HTML.
22
-
23
- Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
24
- work correctly both with client-side routing and a non-root public URL.
25
- Learn how to configure a non-root public URL by running `npm run build`.
26
- -->
27
- <link
28
- rel="stylesheet"
29
- href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap"
30
- />
31
- <link
32
- rel="stylesheet"
33
- href="https://fonts.googleapis.com/icon?family=Material+Icons"
34
- />
35
- <meta name="viewport" content="initial-scale=1, width=device-width" />
36
- <title>React App</title>
37
- </head>
38
- <body>
39
- <noscript>You need to enable JavaScript to run this app.</noscript>
40
- <div id="root"></div>
41
- <!--
42
- This HTML file is a template.
43
- If you open it directly in the browser, you will see an empty page.
44
-
45
- You can add webfonts, meta tags, or analytics to this file.
46
- The build step will place the bundled scripts into the <body> tag.
47
-
48
- To begin the development, run `npm start` or `yarn start`.
49
- To create a production bundle, use `npm run build` or `yarn build`.
50
- -->
51
- </body>
52
- </html>
package/public/manifest.json DELETED
@@ -1,25 +0,0 @@
1
- {
2
- "short_name": "React App",
3
- "name": "Create React App Sample",
4
- "icons": [
5
- {
6
- "src": "favicon.ico",
7
- "sizes": "64x64 32x32 24x24 16x16",
8
- "type": "image/x-icon"
9
- },
10
- {
11
- "src": "logo192.png",
12
- "type": "image/png",
13
- "sizes": "192x192"
14
- },
15
- {
16
- "src": "logo512.png",
17
- "type": "image/png",
18
- "sizes": "512x512"
19
- }
20
- ],
21
- "start_url": ".",
22
- "display": "standalone",
23
- "theme_color": "#000000",
24
- "background_color": "#ffffff"
25
- }
package/public/robots.txt DELETED
@@ -1,3 +0,0 @@
1
- # https://www.robotstxt.org/robotstxt.html
2
- User-agent: *
3
- Disallow:
package/src/App.css DELETED
@@ -1,6 +0,0 @@
1
- .App {
2
- display: flex;
3
- width: 600px;
4
- padding-top: 10%;
5
- padding-left: 10%;
6
- }
package/src/App.js DELETED
@@ -1,149 +0,0 @@
1
- import logo from "./logo.svg";
2
- import "./App.css";
3
- import { useState } from "react";
4
-
5
- import Button from "./stories/components/Button";
6
- import Dropdown from "./stories/components/Dropdown";
7
- import SegmentedButton from "./stories/components/SegmentedButton";
8
- import TotalDoughnutChart from "./stories/components/TotalDoughnutChart";
9
- import OneColumnContainer from "./stories/components/OneColumnContainer";
10
-
11
- const onChangehandler = (event, newValue) => {
12
- console.log("Dropdown onChange event returned:");
13
- console.log(newValue);
14
- };
15
-
16
- const onInputChangeHandler = (event, newInputValue) => {
17
- console.log("Dropdown onInputChange event returned:");
18
- console.log(newInputValue);
19
- };
20
-
21
- function App() {
22
- const options = [
23
- { id: "1", label: "Shufersal" },
24
- { id: "2", label: "EPC" },
25
- { id: "3", label: "Food Lion" },
26
- { id: "4", label: "Hannaford" },
27
- { id: "5", label: "Giant Food" },
28
- { id: "6", label: "The Giant Company" },
29
- { id: "7", label: "Stop&Shop" },
30
- { id: "8", label: "Price Chopper" },
31
- { id: "9", label: "South Eastern Grocers" },
32
- ];
33
-
34
- const segmentsArr1 = [
35
- {
36
- label: "Complete",
37
- value: "complete",
38
- },
39
- {
40
- label: "Incomplete",
41
- value: "incomplete",
42
- },
43
- {
44
- label: "Pending",
45
- value: "pending",
46
- },
47
- ];
48
-
49
- const segmentsArr2 = [
50
- {
51
- label: "First",
52
- value: "first",
53
- },
54
- {
55
- label: "Second",
56
- value: "second",
57
- },
58
- {
59
- label: "Third",
60
- value: "third",
61
- },
62
- ];
63
-
64
- const [selectedValue1, setSelectedValue1] = useState("complete");
65
- const [selectedValue2, setSelectedValue2] = useState("complete");
66
-
67
- return (
68
- <div className="App">
69
- <OneColumnContainer
70
- height="250px"
71
- infoText="Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s"
72
- width="250px"
73
- />
74
-
75
- <TotalDoughnutChart
76
- currency
77
- currencyType="USD"
78
- dotCut
79
- height={374}
80
- legendData={[
81
- {
82
- color: "#85A1D2",
83
- currency: "USD",
84
- name: "Package Cost",
85
- value: 30000,
86
- },
87
- {
88
- color: "#9AE6FF",
89
- currency: "USD",
90
- name: "Redemption Cost",
91
- value: 6500,
92
- },
93
- ]}
94
- textColor="#212121"
95
- title="Total Cost"
96
- value={36500}
97
- width={336}
98
- />
99
- {/*
100
- <Dropdown
101
- width="300"
102
- size="small"
103
- text="Select retailer......"
104
- multiSelect={false}
105
- options={options}
106
- shape="round"
107
- onChange={onChangehandler}
108
- onInputChange={onInputChangeHandler}
109
- />
110
- <Dropdown
111
- width={400}
112
- size="small"
113
- text="Select retailer......"
114
- multiSelect={true}
115
- options={options}
116
- shape="round"
117
- onChange={onChangehandler}
118
- onInputChange={onInputChangeHandler}
119
- />
120
- <SegmentedButton
121
- backgroundColor="#ECF0FF"
122
- controlRadius={8}
123
- defaultIndex={0}
124
- fontSize={14}
125
- name="segmentedFilter"
126
- onClick={() => {}}
127
- options={[
128
- {
129
- value: "Total",
130
- },
131
- {
132
- value: "Ecommerce",
133
- },
134
- {
135
- value: "In Store",
136
- },
137
- ]}
138
- segmentHeigth={40}
139
- segmentRadius={8}
140
- segmentWidth={120}
141
- selectedSegmentColor="#fcfcfc"
142
- selectedTextColor="#000000"
143
- unselectedTextColor="#000000"
144
- /> */}
145
- </div>
146
- );
147
- }
148
-
149
- export default App;
package/src/App.test.js DELETED
@@ -1,8 +0,0 @@
1
- import { render, screen } from '@testing-library/react';
2
- import App from './App';
3
-
4
- test('renders learn react link', () => {
5
- render(<App />);
6
- const linkElement = screen.getByText(/learn react/i);
7
- expect(linkElement).toBeInTheDocument();
8
- });
package/src/index.css DELETED
@@ -1,13 +0,0 @@
1
- body {
2
- margin: 0;
3
- font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
4
- 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
5
- sans-serif;
6
- -webkit-font-smoothing: antialiased;
7
- -moz-osx-font-smoothing: grayscale;
8
- }
9
-
10
- code {
11
- font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
12
- monospace;
13
- }
package/src/index.js DELETED
@@ -1,22 +0,0 @@
1
- import React from 'react';
2
- import ReactDOM from 'react-dom/client';
3
- import './index.css';
4
- import App from './App';
5
- // import '@fontsource/roboto/300.css';
6
- // import '@fontsource/roboto/400.css';
7
- // import '@fontsource/roboto/500.css';
8
- // import '@fontsource/roboto/700.css';
9
-
10
-
11
-
12
- const root = ReactDOM.createRoot(document.getElementById('root'));
13
- root.render(
14
- <React.StrictMode>
15
- <App />
16
- </React.StrictMode>
17
- );
18
-
19
- // If you want to start measuring performance in your app, pass a function
20
- // to log results (for example: reportWebVitals(console.log))
21
- // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
22
-
package/src/logo.svg DELETED
@@ -1 +0,0 @@
1
- <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 841.9 595.3"><g fill="#61DAFB"><path d="M666.3 296.5c0-32.5-40.7-63.3-103.1-82.4 14.4-63.6 8-114.2-20.2-130.4-6.5-3.8-14.1-5.6-22.4-5.6v22.3c4.6 0 8.3.9 11.4 2.6 13.6 7.8 19.5 37.5 14.9 75.7-1.1 9.4-2.9 19.3-5.1 29.4-19.6-4.8-41-8.5-63.5-10.9-13.5-18.5-27.5-35.3-41.6-50 32.6-30.3 63.2-46.9 84-46.9V78c-27.5 0-63.5 19.6-99.9 53.6-36.4-33.8-72.4-53.2-99.9-53.2v22.3c20.7 0 51.4 16.5 84 46.6-14 14.7-28 31.4-41.3 49.9-22.6 2.4-44 6.1-63.6 11-2.3-10-4-19.7-5.2-29-4.7-38.2 1.1-67.9 14.6-75.8 3-1.8 6.9-2.6 11.5-2.6V78.5c-8.4 0-16 1.8-22.6 5.6-28.1 16.2-34.4 66.7-19.9 130.1-62.2 19.2-102.7 49.9-102.7 82.3 0 32.5 40.7 63.3 103.1 82.4-14.4 63.6-8 114.2 20.2 130.4 6.5 3.8 14.1 5.6 22.5 5.6 27.5 0 63.5-19.6 99.9-53.6 36.4 33.8 72.4 53.2 99.9 53.2 8.4 0 16-1.8 22.6-5.6 28.1-16.2 34.4-66.7 19.9-130.1 62-19.1 102.5-49.9 102.5-82.3zm-130.2-66.7c-3.7 12.9-8.3 26.2-13.5 39.5-4.1-8-8.4-16-13.1-24-4.6-8-9.5-15.8-14.4-23.4 14.2 2.1 27.9 4.7 41 7.9zm-45.8 106.5c-7.8 13.5-15.8 26.3-24.1 38.2-14.9 1.3-30 2-45.2 2-15.1 0-30.2-.7-45-1.9-8.3-11.9-16.4-24.6-24.2-38-7.6-13.1-14.5-26.4-20.8-39.8 6.2-13.4 13.2-26.8 20.7-39.9 7.8-13.5 15.8-26.3 24.1-38.2 14.9-1.3 30-2 45.2-2 15.1 0 30.2.7 45 1.9 8.3 11.9 16.4 24.6 24.2 38 7.6 13.1 14.5 26.4 20.8 39.8-6.3 13.4-13.2 26.8-20.7 39.9zm32.3-13c5.4 13.4 10 26.8 13.8 39.8-13.1 3.2-26.9 5.9-41.2 8 4.9-7.7 9.8-15.6 14.4-23.7 4.6-8 8.9-16.1 13-24.1zM421.2 430c-9.3-9.6-18.6-20.3-27.8-32 9 .4 18.2.7 27.5.7 9.4 0 18.7-.2 27.8-.7-9 11.7-18.3 22.4-27.5 32zm-74.4-58.9c-14.2-2.1-27.9-4.7-41-7.9 3.7-12.9 8.3-26.2 13.5-39.5 4.1 8 8.4 16 13.1 24 4.7 8 9.5 15.8 14.4 23.4zM420.7 163c9.3 9.6 18.6 20.3 27.8 32-9-.4-18.2-.7-27.5-.7-9.4 0-18.7.2-27.8.7 9-11.7 18.3-22.4 27.5-32zm-74 58.9c-4.9 7.7-9.8 15.6-14.4 23.7-4.6 8-8.9 16-13 24-5.4-13.4-10-26.8-13.8-39.8 13.1-3.1 26.9-5.8 41.2-7.9zm-90.5 125.2c-35.4-15.1-58.3-34.9-58.3-50.6 0-15.7 22.9-35.6 58.3-50.6 8.6-3.7 18-7 27.7-10.1 5.7 19.6 13.2 40 22.5 60.9-9.2 20.8-16.6 41.1-22.2 60.6-9.9-3.1-19.3-6.5-28-10.2zM310 490c-13.6-7.8-19.5-37.5-14.9-75.7 1.1-9.4 2.9-19.3 5.1-29.4 19.6 4.8 41 8.5 63.5 10.9 13.5 18.5 27.5 35.3 41.6 50-32.6 30.3-63.2 46.9-84 46.9-4.5-.1-8.3-1-11.3-2.7zm237.2-76.2c4.7 38.2-1.1 67.9-14.6 75.8-3 1.8-6.9 2.6-11.5 2.6-20.7 0-51.4-16.5-84-46.6 14-14.7 28-31.4 41.3-49.9 22.6-2.4 44-6.1 63.6-11 2.3 10.1 4.1 19.8 5.2 29.1zm38.5-66.7c-8.6 3.7-18 7-27.7 10.1-5.7-19.6-13.2-40-22.5-60.9 9.2-20.8 16.6-41.1 22.2-60.6 9.9 3.1 19.3 6.5 28.1 10.2 35.4 15.1 58.3 34.9 58.3 50.6-.1 15.7-23 35.6-58.4 50.6zM320.8 78.4z"/><circle cx="420.9" cy="296.5" r="45.7"/><path d="M520.5 78.1z"/></g></svg>
package/src/stories/Benchmark.stories.jsx DELETED
@@ -1,111 +0,0 @@
1
- import React from "react";
2
- import { Benchmark } from "./components/Benchmark";
3
-
4
- export default {
5
- title: "SAG BI/Benchmark",
6
- component: Benchmark,
7
- tags: ["autodocs"],
8
-
9
- argTypes: {
10
- currentValue: {
11
- name: "currentValue",
12
- control: { type: "number", min: 0, max: 100000000000000 },
13
- description: "curent value (<=100%) ",
14
- },
15
-
16
- totalValue: {
17
- name: "totalValue",
18
- control: { type: "number", min: 0, max: 100000000000000 },
19
- description: "total value (100%) ",
20
- },
21
-
22
- width: {
23
- name: "width",
24
- control: { type: "number", min: 0, max: 600 },
25
- description: "width of the control (in px)",
26
- },
27
-
28
- height: {
29
- name: "height",
30
- control: { type: "number", min: 0, max: 600 },
31
- description: "height of the control (in px)",
32
- },
33
-
34
- color: {
35
- name: "color",
36
- description:
37
- "Sets the color of current value when it is greater then 50% of total value",
38
- control: {
39
- type: "color",
40
- presetColors: ["#ffffff", "#ff0000", "#00ff00", "#0000ff"],
41
- },
42
- },
43
-
44
- linearGradientColor: {
45
- name: "linearGradientColor",
46
- description:
47
- "Sets the linear-Gradient color of current value when it is greater then 50% of total value",
48
- control: {
49
- type: "color",
50
- presetColors: ["#ffffff", "#ff0000", "#00ff00", "#0000ff"],
51
- },
52
- },
53
-
54
- underAvarageColor: {
55
- name: "underAvarageColor",
56
- description:
57
- "Sets the color of current value when it is under 50% of total value",
58
- control: {
59
- type: "color",
60
- presetColors: ["#ffffff", "#ff0000", "#00ff00", "#0000ff"],
61
- },
62
- },
63
-
64
- linearGradientUnderAvarageColor: {
65
- name: "linearGradientUnderAvarageColor",
66
- description:
67
- "Sets the linear-Gradient color of current value when it is under 50% of total value",
68
- control: {
69
- type: "color",
70
- presetColors: ["#ffffff", "#ff0000", "#00ff00", "#0000ff"],
71
- },
72
- },
73
-
74
- backgroundColor: {
75
- name: "backgroundColor",
76
- description: "Sets the background color of the control",
77
- control: {
78
- type: "color",
79
- presetColors: ["#ffffff", "#ff0000", "#00ff00", "#0000ff"],
80
- },
81
- },
82
- },
83
- };
84
-
85
- const Template = (args) => <Benchmark {...args} />;
86
-
87
- export const GreaterAvarage = Template.bind({});
88
- GreaterAvarage.args = {
89
- totalValue: 100000,
90
- currentValue: 60000,
91
- width: 100,
92
- height: 12,
93
- color: "#79DB95",
94
- linearGradientColor: "#C3EFD0",
95
- underAvarageColor: "#FD5959",
96
- linearGradientUnderAvarageColor: "#FDB1B1",
97
- backgroundColor: "#F2F2F2",
98
- };
99
-
100
- export const LessAvarage = Template.bind({});
101
- LessAvarage.args = {
102
- totalValue: 1000,
103
- currentValue: 400,
104
- width: 100,
105
- height: 12,
106
- color: "#79DB95",
107
- linearGradientColor: "#C3EFD0",
108
- underAvarageColor: "#FD5959",
109
- linearGradientUnderAvarageColor: "#FDB1B1",
110
- backgroundColor: "#F2F2F2",
111
- };
package/src/stories/Benchmark.style.js DELETED
@@ -1,82 +0,0 @@
1
- import styled from "styled-components";
2
-
3
- export const ControlsContainer = styled.div`
4
- display: flex;
5
- position: relative;
6
- margin: 0px 0 0px;
7
- font-family: "Lato", sans-serif;
8
- font-style: normal;
9
- width: ${(props) => {
10
- return props.width.toString().concat("", "px");
11
- }};
12
- height: ${(props) => {
13
- return props.height.toString().concat("", "px");
14
- }};
15
- //box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
16
- border-radius: 100px;
17
- //border: 1px solid red;
18
- `;
19
-
20
- export const Controls = styled.div`
21
- position: relative;
22
- border-radius: 100px;
23
- width: ${(props) => {
24
- return props.width.toString().concat("", "px");
25
- }};
26
- height: ${(props) => {
27
- return props.height.toString().concat("", "px");
28
- }};
29
- //background: #ffffff;
30
- //border: 1px solid blue;
31
- `;
32
-
33
- export const BackgroundValueRectangle = styled.div`
34
- position: absolute;
35
- width: ${(props) => {
36
- return props.width.toString().concat("", "px");
37
- }};
38
- height: ${(props) => {
39
- return props.height.toString().concat("", "px");
40
- }};
41
- top: 0px;
42
- left: 0px;
43
- border-radius: 100px;
44
- background: ${(props) => props.color};
45
- //border: 1px solid orange;
46
- `;
47
-
48
- export const CurrentValueRectangle = styled.div`
49
- position: absolute;
50
- width: ${(props) => {
51
- return props.width.toString().concat("", "px");
52
- }};
53
- height: ${(props) => {
54
- return props.height.toString().concat("", "px");
55
- }};
56
- top: 0px;
57
- left: 0px;
58
- border-radius: 100px;
59
- background: linear-gradient(
60
- 90deg,
61
- ${(props) => props.linearGradientColor} 0%,
62
- ${(props) => props.color} 100%
63
- );
64
- //border: 1px solid green;
65
- `;
66
-
67
- export const AvarageDelimiter = styled.div`
68
- position: absolute;
69
- height: ${(props) => {
70
- return props.height.toString().concat("", "px");
71
- }};
72
- width: ${(props) => {
73
- return props.width.toString().concat("", "px");
74
- }};
75
- top: ${(props) => {
76
- return props.top.toString().concat("", "px");
77
- }};
78
- left: ${(props) => {
79
- return props.left.toString().concat("", "px");
80
- }};
81
- border: 1px solid #212121;
82
- `;