[Fix-497]-head collisions comparison

.storybook/main.js

@@ -0,0 +1,13 @@
+module.exports = {
+  stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
+  addons: ['@storybook/addon-links', '@storybook/addon-essentials', '@storybook/preset-create-react-app'],
+  typescript: {
+    reactDocgen: 'react-docgen-typescript',
+    reactDocgenTypescriptOptions: {
+      compilerOptions: {
+        allowSyntheticDefaultImports: false,
+        esModuleInterop: false,
+      },
+    },
+  },
+};

.storybook/preview-head.html

@@ -0,0 +1,8 @@
+<!-- Google alef font. see https://fonts.google.com/specimen/Alef -->
+<link
+  href="https://fonts.googleapis.com/css2?family=Alef:wght@400;700&display=swap"
+  rel="stylesheet"
+  crossorigin="anonymous"
+/>
+<!-- Material icons. see: https://google.github.io/material-design-icons/ -->
+<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" crossorigin="anonymous" />

.storybook/preview.js

@@ -0,0 +1,28 @@
+import React, { Suspense } from 'react';
+import { Box, createStyles, makeStyles, createMuiTheme, ThemeProvider } from '@material-ui/core';
+import OverlayLoader from '../src/components/molecules/OverlayLoader';
+import { defaultThemeOptions } from '../src/style/theme';
+
+const customTheme = createMuiTheme(defaultThemeOptions);
+const useStyles = makeStyles(() =>
+  createStyles({
+    rtl: {
+      direction: 'rtl',
+    },
+  }),
+);
+
+function StoryApp(Story) {
+  const classes = useStyles();
+
+  return (
+    <Suspense fallback={<OverlayLoader show />}>
+      <ThemeProvider theme={customTheme}>
+        <Box className={classes.rtl}>
+          <Story />
+        </Box>
+      </ThemeProvider>
+    </Suspense>
+  );
+}
+export const decorators = [StoryApp];

package.json

@@ -41,10 +41,10 @@
     "lint": "eslint src/**/*.ts src/**/*.tsx",
     "test": "react-scripts test",
     "eject": "react-scripts eject",
-    "sb": "start-storybook -p 9009 -s public",
-    "build-sb": "build-storybook -s public",
     "git:prune": "git remote prune origin",
-    "git:merged": "git branch --merged development"
+    "git:merged": "git branch --merged development",
+    "sb": "start-storybook -p 6006 -s public",
+    "build-sb": "build-storybook -s public"
   },
   "prettier": {
     "singleQuote": true,
@@ -82,11 +82,12 @@
     ]
   },
   "devDependencies": {
-    "@storybook/addon-actions": "^5.3.21",
-    "@storybook/addon-links": "^5.3.21",
-    "@storybook/addons": "^5.3.21",
-    "@storybook/preset-create-react-app": "^1.5.2",
-    "@storybook/react": "^5.3.21",
+    "@storybook/addon-actions": "^6.1.11",
+    "@storybook/addon-essentials": "^6.1.11",
+    "@storybook/addon-links": "^6.1.11",
+    "@storybook/node-logger": "^6.1.11",
+    "@storybook/preset-create-react-app": "^3.1.5",
+    "@storybook/react": "^6.1.11",
     "@testing-library/jest-dom": "^4.2.4",
     "@testing-library/react": "^9.5.0",
     "@testing-library/user-event": "^7.2.1",

public/locales/he/translation.json

@@ -61,7 +61,7 @@
     }
   },
   "onUrban": {
-    "road": "בכבישים עירוניים (ללא צמתים)",
+    "road": "בכבישים בין עירוניים (ללא צמתים)",
     "location": "בכל הארץ"
   },
   "cardEditor": {

src/components/atoms/Button.stories.tsx

@@ -1,9 +1,10 @@
-import React from 'react';
-import { action } from '@storybook/addon-actions';
-import Button from './Button';
+export {};
+// import React from 'react';
+// import { action } from '@storybook/addon-actions';
+// import Button from './Button';
 
-export default {
-  title: 'Buttons',
-};
+// export default {
+//   title: 'Buttons',
+// };
 
-// export const ButtonPrimary = () => <Button.standard onClick={action('clicked')}>Button Primary</Button>;
+// // export const ButtonPrimary = () => <Button.standard onClick={action('clicked')}>Button Primary</Button>;

src/components/molecules/PieChartView.tsx

@@ -116,6 +116,7 @@ export const PieChartView: FC<IProps> = ({
     (props: PieLabelRenderProps) => labelProps.customizedLabel(props, labelProps.labelFontSize, true),
     [labelProps],
   );
+
   return (
     <ResponsiveContainer width={width} height={'100%'}>
       <PieChart>
@@ -125,9 +126,10 @@ export const PieChartView: FC<IProps> = ({
           nameKey={xLabel}
           innerRadius={innerRadius}
           outerRadius={outerRadius}
-          minAngle={15}
           label={usePercent ? renderLabelPercent : renderLabelCount}
           labelLine={false}
+          startAngle={-270}
+          endAngle={360}
         >
           {data.map((entry: any, index: any) => (
             <Cell key={index} fill={COLORS[index % COLORS.length]} />

src/components/molecules/widgets/HeadOnCollisionsComparisonWidget.tsx

@@ -50,7 +50,7 @@ const useStyles = makeStyles(() => ({
     height: SECONDARY_CONTENT_HEIGHT,
     width: '80%',
     position: 'relative',
-    bottom: '25%',
+    bottom: '10%',
     left: '5%',
     fontSize: `${(PROPORTION * PRIMARY_FONT_SIZE).toString()} px`,
   },

src/components/molecules/widgets/stories/HeadOnCollisionsComparisonWidget.stories.tsx

@@ -0,0 +1,27 @@
+import * as React from 'react';
+import HeadOnCollisionsComparisonWidget from '../HeadOnCollisionsComparisonWidget';
+
+export default {
+  title: 'Components/molecules/widgets/HeadOnCollisionsComparisonWidget',
+};
+
+const data = {
+  items: {
+    specific_road_segment_fatal_accidents: [
+      { desc: '\u05d7\u05d6\u05d9\u05ea\u05d9\u05d5\u05ea', count: 170 },
+      { desc: '\u05d0\u05d7\u05e8\u05d5\u05ea', count: 150 },
+    ],
+    all_roads_fatal_accidents: [
+      { desc: '\u05d7\u05d6\u05d9\u05ea\u05d9\u05d5\u05ea', count: 178 },
+      { desc: '\u05d0\u05d7\u05e8\u05d5\u05ea', count: 541 },
+    ],
+  },
+  text: {
+    title:
+      '\u05ea\u05d0\u05d5\u05e0\u05d5\u05ea \u05e7\u05d8\u05dc\u05e0\u05d9\u05d5\u05ea \u05e2\u05f4\u05e4 \u05e1\u05d5\u05d2',
+  },
+};
+
+export const common = () => <HeadOnCollisionsComparisonWidget data={data} segmetText="segmetText" />;
+
+export const usePercent = () => <HeadOnCollisionsComparisonWidget data={data} segmetText="segmetText" usePercent />;

src/components/organisms/stories/WidgetsTemplate.stories.tsx

@@ -0,0 +1,33 @@
+import * as React from 'react';
+import { Box } from '@material-ui/core';
+import makeStyles from '@material-ui/core/styles/makeStyles';
+import WidgetsTemplate from '../WidgetsTemplate';
+
+export default {
+  title: 'Components/organisms/WidgetsTemplate',
+};
+
+const useStyles = makeStyles({
+  mainBox: {
+    height: 'inherit',
+  },
+
+  widgetBox: {
+    height: 'inherit',
+    overflow: 'auto',
+  },
+});
+
+const App: React.FC = () => {
+  const classes = useStyles();
+
+  return (
+    <Box display="flex" flexGrow={1} className={classes.mainBox}>
+      <Box flexGrow={5} className={classes.widgetBox} position="relative">
+        <WidgetsTemplate />
+      </Box>
+    </Box>
+  );
+};
+
+export const common = () => <App />;