timeline module wip

lib/package.json

@@ -37,7 +37,8 @@
     "homepage": "https://github.com/the-deep/reporting-module-map-vizzard#readme",
     "dependencies": {
         "@babel/runtime-corejs3": "^7.22.3",
-        "@rollup/plugin-image": "^3.0.3"
+        "@rollup/plugin-image": "^3.0.3",
+        "@knight-lab/timelinejs": "^3.9.3"
     },
     "peerDependencies": {
         "react": "^18.2.0",

lib/rollup.config.js

@@ -9,7 +9,6 @@ import image from '@rollup/plugin-image';
 import postcssPresetEnv from 'postcss-preset-env';
 import postcssNested from 'postcss-nested';
 import postcssNormalize from 'postcss-normalize';
-
 import pkg from './package.json' assert { type: 'json' };
 
 const INPUT_FILE_PATH = 'src/index.ts';

lib/src/Timeline/index.tsx

@@ -0,0 +1,57 @@
+import React, { useEffect } from 'react';
+import { Timeline as TL } from '@knight-lab/timelinejs';
+import '@knight-lab/timelinejs/dist/css/timeline.css';
+import './Timeline.css';
+
+export interface Props {
+    data: {
+        Date: string;
+        Category: string;
+        Details: string;
+        Source: string;
+        Link: string;
+    }[],
+}
+
+function Timeline({ data }: Props) {
+    const timelineoptions = {
+    // initial_zoom: 2,
+        scale_factor: 1.4,
+        timenav_position: 'top',
+        height: '500',
+        width: '100%',
+        lang: 'en',
+        start_at_end: true,
+        font: 'Roboto Slab',
+    };
+
+    // eslint-disable-next-line
+    const evt = data.map((d:any) => (
+        {
+            start_date: new Date(d.Date),
+            display_date: (new Date(d.Date)).toDateString(),
+            group: d.Category,
+            text: {
+                headline: d['Main events'],
+                text: d.Details,
+            },
+        }
+    ));
+
+    const events = { events: evt };
+
+    useEffect(() => {
+    // eslint-disable-next-line
+    const timeline = new TL(
+            'timeline-embed',
+            events,
+            timelineoptions,
+        );
+    });
+
+    return (
+        <div id="timeline-embed" className="container" style={{ height: 500 }} />
+    );
+}
+
+export default Timeline;

lib/src/Timeline/timelinejs.d.ts

@@ -0,0 +1 @@
+declare module '@knight-lab/timelinejs';

lib/src/index.ts

@@ -4,3 +4,8 @@ export {
     default as KPIs,
     type Props as KPIsProps,
 } from './KPIs';
+
+export {
+    default as Timeline,
+    // type Props as TimelineProps,
+} from './Timeline';

lib/tsconfig.json

@@ -30,5 +30,5 @@
         "sourceMap": true,
         "baseUrl": "."
     },
-    "include": ["./src/index.ts", "./src/declarations"]
+    "include": ["./src/index.ts", "./src/declarations", "src/Timeline/timelinejs.d.ts"]
 }

storybook/src/App.jsx

@@ -4,7 +4,7 @@ import { KPIs } from '@the-deep/reporting-module-components';
 import '@the-deep/reporting-module-components/build/esm/index.css';
 
 import MapVizzard from './components/MapVizzard';
-import Timeline from './components/Timeline/Timeline';
+import Timeline from '@the-deep/reporting-module-components/src/Timeline/Timeline';
 import timelineData from './stories/Timeline.json';
 import kpiData from './stories/KPIs.json';
 import styles from './App.module.css';

storybook/src/stories/Timeline.stories.js

@@ -1,4 +1,5 @@
-import Timeline from '../components/Timeline/Timeline';
+import { Timeline } from '@the-deep/reporting-module-components';
+
 import data from './Timeline.json';
 
 // Story Config

storybook/tsconfig.json

@@ -22,5 +22,5 @@
   },
   "include": [
     "src"
-  ]
+, "../lib/src/Timeline"  ]
 }