updae

src/framework/processing/py/port/script.py

@@ -264,50 +264,22 @@ def extract_videos_viewed(data):
 
     df = pd.DataFrame(video_counts, columns=["Date", "Videos"])
     df["Timeslot"] = map_to_timeslot(df["Date"].dt.hour)
-    df["Date"] = df["Date"].dt.strftime("%Y-%m-%d")
+    df["Date"] = df["Date"].dt.strftime("%Y-%m-%d %H:00:00")
     df = df.reindex(columns=["Date", "Timeslot", "Videos"])
 
     visualizations = [
         props.PropsUIChartVisualization(
             title=props.Translatable(
                 {
-                    "en": "Number of videos per timeslot",
-                    "nl": "Aantal bekeken videos per tijdslot",
+                    "en": "Number of videos watched for every hour of the day",
+                    "nl": "Aantal videos bekeken per uur van de dag",
                 }
             ),
             type="bar",
-            group=props.PropsUIChartGroup(
-                column="Timeslot",
-                levels=[
-                    "0-1",
-                    "1-2",
-                    "2-3",
-                    "3-4",
-                    "4-5",
-                    "5-6",
-                    "6-7",
-                    "7-8",
-                    "8-9",
-                    "9-10",
-                    "10-11",
-                    "11-12",
-                    "12-13",
-                    "13-14",
-                    "14-15",
-                    "15-16",
-                    "16-17",
-                    "17-18",
-                    "18-19",
-                    "19-20",
-                    "20-21",
-                    "21-22",
-                    "22-23",
-                    "23-24",
-                ],
-            ),
+            group=props.PropsUIChartGroup(column="Date", dateFormat="hour_cycle"),
             values=[
                 props.PropsUIChartValue(
-                    label="N", column="Videos", aggregate="sum", addZeroes=True
+                    column="Videos", aggregate="sum", addZeroes=True
                 )
             ],
         )
@@ -372,7 +344,7 @@ def extract_comments_and_likes(data):
 
     df = pd.merge(df1, df2, left_on="Date", right_on="Date", how="outer").sort_index()
     df["Timeslot"] = map_to_timeslot(df.index.hour)
-    df["Date"] = df.index.strftime("%Y-%m-%d")
+    df["Date"] = df.index.strftime("%Y-%m-%d %H:00:00")
     df = (
         df.reindex(columns=["Date", "Timeslot", "Comment posts", "Likes given"])
         .reset_index(drop=True)
@@ -381,7 +353,26 @@ def extract_comments_and_likes(data):
     df["Comment posts"] = df["Comment posts"].astype(int)
     df["Likes given"] = df["Likes given"].astype(int)
 
-    visualizations = []
+    visualizations = [
+        props.PropsUIChartVisualization(
+            title=props.Translatable(
+                {
+                    "en": "Number of comments and likes for every hour of the day",
+                    "nl": "Aantal comments en likes per uur van de dag",
+                }
+            ),
+            type="bar",
+            group=props.PropsUIChartGroup(column="Date", dateFormat="hour_cycle"),
+            values=[
+                props.PropsUIChartValue(
+                    label="Comments and likes",
+                    column="Date",
+                    aggregate="count",
+                    addZeroes=True,
+                )
+            ],
+        )
+    ]
 
     return ExtractionResult(
         "tiktok_comments_and_likes",
@@ -408,7 +399,26 @@ def extract_session_info(data):
     df = df.drop("End", axis=1)
     df = df.drop("Duration", axis=1)
 
-    visualizations = []
+    visualizations = [
+        props.PropsUIChartVisualization(
+            title=props.Translatable(
+                {
+                    "en": "Number of minutes spent on TikTok",
+                    "nl": "Aantal minuten besteed aan TikTok",
+                }
+            ),
+            type="line",
+            group=props.PropsUIChartGroup(column="Start", dateFormat="auto"),
+            values=[
+                props.PropsUIChartValue(
+                    label="Nr. of minutes",
+                    column="Duration (in minutes)",
+                    aggregate="sum",
+                    addZeroes=True,
+                )
+            ],
+        )
+    ]
 
     return ExtractionResult(
         "tiktok_session_info",

src/framework/types/visualizations.ts

@@ -65,6 +65,7 @@ export interface AxisSettings {
 }
 
 export type TickerFormat = 'percent' | 'default'
+export type XType = 'string' | 'date'
 
 export interface ChartVisualizationData {
   type: 'line' | 'bar' | 'area'
@@ -87,5 +88,4 @@ export type DateFormat =
   | 'hour'
   | 'month_cycle'
   | 'weekday_cycle'
-  | 'day_cycle'
   | 'hour_cycle'

src/framework/visualisation/react/ui/elements/figures/recharts_graph.tsx

@@ -22,8 +22,9 @@ interface Props {
   visualizationData: ChartVisualizationData
 }
 
-export default function RechartsGraph({ visualizationData }: Props): JSX.Element | null {
-  function tooltip(): JSX.Element {
+export default function RechartsGraph ({ visualizationData }: Props): JSX.Element | null {
+  console.log(visualizationData)
+  function tooltip (): JSX.Element {
     return (
       <Tooltip
         allowEscapeViewBox={{ x: false, y: false }}
@@ -38,7 +39,7 @@ export default function RechartsGraph({ visualizationData }: Props): JSX.Element
     )
   }
 
-  function axes(minTickGap: number): JSX.Element | null {
+  function axes (minTickGap: number): JSX.Element | null {
     const hasVisualizationData = Boolean(visualizationData)
     if (!hasVisualizationData) return null
     const secondary =
@@ -51,19 +52,19 @@ export default function RechartsGraph({ visualizationData }: Props): JSX.Element
     return (
       <>
         <XAxis dataKey={visualizationData.xKey.label} minTickGap={minTickGap} />
-        <YAxis yAxisId="left" tickFormatter={tickFormatter} />
-        {secondary && <YAxis yAxisId="right" orientation="right" tickFormatter={tickFormatter2} />}
+        <YAxis yAxisId='left' tickFormatter={tickFormatter} />
+        {secondary && <YAxis yAxisId='right' orientation='right' tickFormatter={tickFormatter2} />}
       </>
     )
   }
 
-  function legend(): JSX.Element {
+  function legend (): JSX.Element {
     return (
       <Legend
         margin={{ left: 10 }}
-        align="right"
-        verticalAlign="top"
-        iconType="plainline"
+        align='right'
+        verticalAlign='top'
+        iconType='plainline'
         wrapperStyle={{ fontSize: '0.8rem' }}
       />
     )
@@ -83,7 +84,7 @@ export default function RechartsGraph({ visualizationData }: Props): JSX.Element
             <Line
               key={yKey.label}
               yAxisId={yKey.secondAxis ?? false ? 'right' : 'left'}
-              type="monotone"
+              type='monotone'
               dataKey={yKey.label}
               dot={false}
               strokeWidth={2}
@@ -140,13 +141,13 @@ export default function RechartsGraph({ visualizationData }: Props): JSX.Element
 
   if (chart == null) return null
   return (
-    <ResponsiveContainer width="100%" height="100%">
+    <ResponsiveContainer width='100%' height='100%'>
       {chart}
     </ResponsiveContainer>
   )
 }
 
-function getLineStyle(index: number): { color: string; dash: string } {
+function getLineStyle (index: number): { color: string, dash: string } {
   const COLORS = ['#4272EF', '#FF5E5E', '#FFCF60', '#1E3FCC', '#CC3F3F', '#CC9F3F']
   const DASHES = ['1', '5 5', '10 10', '5 5 10 10']
 
@@ -157,7 +158,7 @@ function getLineStyle(index: number): { color: string; dash: string } {
   return { color: COLORS[row], dash: DASHES[column] }
 }
 
-function getTickFormatters(yKeys: AxisSettings[]): {
+function getTickFormatters (yKeys: AxisSettings[]): {
   tickFormatter: ((value: number) => string) | undefined
   tickFormatter2: ((value: number) => string) | undefined
 } {
@@ -179,7 +180,7 @@ function getTickFormatters(yKeys: AxisSettings[]): {
   return { tickFormatter, tickFormatter2 }
 }
 
-function getTickFormatter(format: TickerFormat): ((value: number) => string) | undefined {
+function getTickFormatter (format: TickerFormat): ((value: number) => string) | undefined {
   if (format === 'percent') return (value: number) => `${value}%`
   return undefined
 }

src/framework/visualisation/react/ui/pages/donation_page.tsx

@@ -1,74 +1,74 @@
-import React from "react";
-import { Weak } from "../../../../helpers";
-import TextBundle from "../../../../text_bundle";
-import { Translator } from "../../../../translator";
-import { Translatable } from "../../../../types/elements";
-import { PropsUIPageDonation } from "../../../../types/pages";
+import React from 'react'
+import { Weak } from '../../../../helpers'
+import TextBundle from '../../../../text_bundle'
+import { Translator } from '../../../../translator'
+import { Translatable } from '../../../../types/elements'
+import { PropsUIPageDonation } from '../../../../types/pages'
 import {
   isPropsUIPromptConfirm,
   isPropsUIPromptConsentForm,
   isPropsUIPromptFileInput,
   isPropsUIPromptRadioInput,
-  isPropsUIPromptQuestionnaire,
-} from "../../../../types/prompts";
-import { ReactFactoryContext } from "../../factory";
-import { ForwardButton } from "../elements/button";
-import { Title1 } from "../elements/text";
-import { Confirm } from "../prompts/confirm";
-import { ConsentForm } from "../prompts/consent_form";
-import { FileInput } from "../prompts/file_input";
-import { Questionnaire } from "../prompts/questionnaire";
-import { RadioInput } from "../prompts/radio_input";
-import { Footer } from "./templates/footer";
+  isPropsUIPromptQuestionnaire
+} from '../../../../types/prompts'
+import { ReactFactoryContext } from '../../factory'
+import { ForwardButton } from '../elements/button'
+import { Title1 } from '../elements/text'
+import { Confirm } from '../prompts/confirm'
+import { ConsentForm } from '../prompts/consent_form'
+import { FileInput } from '../prompts/file_input'
+import { Questionnaire } from '../prompts/questionnaire'
+import { RadioInput } from '../prompts/radio_input'
+import { Footer } from './templates/footer'
 // import { Sidebar } from './templates/sidebar'
 // import LogoSvg from '../../../../../assets/images/logo.svg'
-import { Page } from "./templates/page";
-import { Progress } from "../elements/progress";
+import { Page } from './templates/page'
+import { Progress } from '../elements/progress'
 // import { Instructions } from '../elements/instructions'
 
-type Props = Weak<PropsUIPageDonation> & ReactFactoryContext;
+type Props = Weak<PropsUIPageDonation> & ReactFactoryContext
 
 export const DonationPage = (props: Props): JSX.Element => {
-  const { title, forwardButton } = prepareCopy(props);
+  const { title, forwardButton } = prepareCopy(props)
   // const { platform, locale, resolve } = props
-  const { locale, resolve } = props;
+  const { locale, resolve } = props
 
-  function renderBody(props: Props): JSX.Element {
-    const context = { locale: locale, resolve: props.resolve };
-    const body = props.body;
+  function renderBody (props: Props): JSX.Element {
+    const context = { locale: locale, resolve: props.resolve }
+    const body = props.body
     if (isPropsUIPromptFileInput(body)) {
-      return <FileInput {...body} {...context} />;
+      return <FileInput {...body} {...context} />
     }
     if (isPropsUIPromptConfirm(body)) {
-      return <Confirm {...body} {...context} />;
+      return <Confirm {...body} {...context} />
     }
     if (isPropsUIPromptConsentForm(body)) {
-      return <ConsentForm {...body} {...context} />;
+      return <ConsentForm {...body} {...context} />
     }
     if (isPropsUIPromptRadioInput(body)) {
-      return <RadioInput {...body} {...context} />;
+      return <RadioInput {...body} {...context} />
     }
     if (isPropsUIPromptQuestionnaire(body)) {
-      return <Questionnaire {...body} {...context} />;
+      return <Questionnaire {...body} {...context} />
     }
-    throw new TypeError("Unknown body type");
+    throw new TypeError('Unknown body type')
   }
 
-  function handleSkip(): void {
-    resolve?.({ __type__: "PayloadFalse", value: false });
+  function handleSkip (): void {
+    resolve?.({ __type__: 'PayloadFalse', value: false })
   }
 
   const footer: JSX.Element = (
     <Footer
       middle={<Progress percentage={props.footer.progressPercentage} />}
       right={
-        <div className="flex flex-row">
-          <div className="flex-grow" />
+        <div className='flex flex-row'>
+          <div className='flex-grow' />
           <ForwardButton label={forwardButton} onClick={handleSkip} />
         </div>
       }
     />
-  );
+  )
 
   // COMMENT BY NIEK: I TURNED OFF THE SIDEBAR (UGLY)
   // const sidebar: JSX.Element = (
@@ -88,23 +88,23 @@ export const DonationPage = (props: Props): JSX.Element => {
       <Title1 text={title} />
       {renderBody(props)}
     </>
-  );
+  )
 
-  return <Page body={body} footer={footer} />;
-};
+  return <Page body={body} footer={footer} />
+}
 
 interface Copy {
-  title: string;
-  forwardButton: string;
+  title: string
+  forwardButton: string
 }
 
-function prepareCopy({ header: { title }, locale }: Props): Copy {
+function prepareCopy ({ header: { title }, locale }: Props): Copy {
   return {
     title: Translator.translate(title, locale),
-    forwardButton: Translator.translate(forwardButtonLabel(), locale),
-  };
+    forwardButton: Translator.translate(forwardButtonLabel(), locale)
+  }
 }
 
 const forwardButtonLabel = (): Translatable => {
-  return new TextBundle().add("en", "Skip").add("nl", "Overslaan");
-};
+  return new TextBundle().add('en', 'Skip').add('nl', 'Overslaan')
+}