Skip to content

Commit

Permalink
Merge branch 'dashboard-v4' into idr/speed-restrictions-api
Browse files Browse the repository at this point in the history
  • Loading branch information
devinmatte authored Jul 5, 2023
2 parents 71e9ea9 + dbee098 commit f80a808
Show file tree
Hide file tree
Showing 40 changed files with 201 additions and 259 deletions.
2 changes: 1 addition & 1 deletion common/components/controls/MobileControlPanel.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -55,7 +55,7 @@ export const MobileControlPanel: React.FC<MobileControlPanelProps> = ({
return (
<div
className={classNames(
'pb-safe fixed bottom-0 z-20 flex w-full flex-col justify-center',
'pb-safe fixed bottom-0 flex w-full flex-col justify-center',
lineColorBackground[line ?? 'DEFAULT']
)}
>
Expand Down
2 changes: 1 addition & 1 deletion common/components/general/ButtonGroup.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -56,7 +56,7 @@ export const ButtonGroup: <T extends string, K extends string>(
} bg-white text-stone-900 hover:bg-opacity-70 hover:text-white`
)}
>
{option[1]}
<p className="leading-none">{option[1]}</p>
</button>
)}
</Tab>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,7 @@ export const OverviewDateSelection = () => {
selectedIndex={selectedIndex}
pressFunction={handlePresetSelection}
options={Object.entries(OverviewRangeTypes)}
additionalButtonClass="w-fit text-xs sm:text-base"
additionalButtonClass="w-fit text-xs sm:text-base md:text-xs lg:text-sm"
additionalDivClass="md:max-w-md h-10 md:h-7"
isOverview
/>
Expand Down
20 changes: 2 additions & 18 deletions common/components/widgets/internal/BasicWidgetDataLayout.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,6 @@ export type BasicWidgetDataLayoutProps = {
widgetValue: WidgetValueInterface;
sentimentDirection?: SentimentDirection;
layoutKind?: LayoutKind;
isLarge?: boolean;
};

export const BasicWidgetDataLayout: React.FC<BasicWidgetDataLayoutProps> = ({
Expand All @@ -22,30 +21,15 @@ export const BasicWidgetDataLayout: React.FC<BasicWidgetDataLayoutProps> = ({
widgetValue,
layoutKind = 'total-and-delta',
sentimentDirection = 'negativeOnIncrease',
isLarge = true,
}) => {
return (
<>
<div className={classNames('relative flex')}>
{widgetValue.value === undefined && <LoadingSpinner isWidget />}
<div className={classNames('flex flex-col items-start p-2')}>
<p className={classNames('text-base text-gray-500', isLarge ? 'text-base' : 'text-sm')}>
{title}
</p>
<p className={classNames('text-base text-gray-500', 'text-base')}>{title}</p>
<div className="flex flex-row items-baseline gap-x-1">
<p
className={classNames(
'font-semibold text-gray-900',
isLarge ? 'text-2xl' : 'text-xl'
)}
>
{widgetValue.getFormattedValue()}
</p>
<p
className={classNames(isLarge ? 'text-base' : 'text-sm', 'text-design-subtitleGrey')}
>
{widgetValue.getUnits()}
</p>
{widgetValue.getFormattedValue()}
</div>
<div className="mt-1 flex flex-row items-baseline gap-x-1">
{layoutKind !== 'no-delta' && (
Expand Down
67 changes: 0 additions & 67 deletions common/components/widgets/internal/SimpleDeltaWidget.tsx
Original file line number Diff line number Diff line change
@@ -1,67 +0,0 @@
import React from 'react';
import classNames from 'classnames';
import dayjs from 'dayjs';
import type { WidgetValueInterface } from '../../../types/basicWidgets';

import { LoadingSpinner } from '../../graphics/LoadingSpinner';
import { useDelimitatedRoute } from '../../../utils/router';

type SentimentDirection = 'positiveOnIncrease' | 'negativeOnIncrease';

export type BasicWidgetDataLayoutProps = {
widgetValue: WidgetValueInterface;
sentimentDirection?: SentimentDirection;
};

export const SimpleDeltaWidget: React.FC<BasicWidgetDataLayoutProps> = ({
widgetValue,
sentimentDirection = 'negativeOnIncrease',
}) => {
const {
query: { startDate, endDate },
} = useDelimitatedRoute();
const getDelta = () => {
const deltaValue = widgetValue.getFormattedDelta();
const increase = widgetValue.delta ? widgetValue.delta > 0 : false;
const positiveSentiment =
(!increase && sentimentDirection === 'negativeOnIncrease') ||
(increase && sentimentDirection === 'positiveOnIncrease');
const bgColor = positiveSentiment ? 'bg-green-100' : 'bg-red-100';
const textColor = positiveSentiment ? 'text-green-800' : 'text-red-800';
return (
<div className="flex flex-row gap-x-2">
<div className="flex flex-row items-baseline gap-x-1">
<div
className={classNames(
'mt-1 flex flex-row items-center rounded-full',
widgetValue.delta ? bgColor : 'bg-gray-100',
widgetValue.delta ? textColor : 'text-rb-800'
)}
>
<p
className={classNames('px-4 text-2xl', widgetValue.delta ? textColor : 'text-rb-800')}
>
{deltaValue}
</p>
</div>
<p className="text-base text-design-subtitleGrey">{widgetValue.getUnits()}</p>
</div>
</div>
);
};

return (
<>
<div className={classNames('relative flex flex-1 bg-white')}>
{widgetValue.value === undefined && <LoadingSpinner isWidget />}
<div className={classNames('flex flex-col items-start p-2')}>
<p className={classNames('text-xs text-design-subtitleGrey sm:text-sm')}>
{dayjs(startDate).format('MMM D, YYYY')} - {dayjs(endDate).format('MMM D, YYYY')}
</p>
<div className="flex flex-row items-baseline gap-x-1">{getDelta()}</div>
<div className="flex flex-row items-baseline gap-x-1"></div>
</div>
</div>
</>
);
};
7 changes: 7 additions & 0 deletions common/components/widgets/internal/UnitText.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
import React from 'react';
export interface UnitTextProps {
text: string;
}
export const UnitText: React.FC<UnitTextProps> = ({ text }) => {
return <span className="text-base text-design-subtitleGrey">{text}</span>;
};
36 changes: 2 additions & 34 deletions common/components/widgets/internal/WidgetForCarousel.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -13,15 +13,13 @@ export type WidgetForCarouselProps = {
widgetValue: WidgetValueInterface;
sentimentDirection?: SentimentDirection;
layoutKind?: LayoutKind;
isLarge?: boolean;
};

export const WidgetForCarousel: React.FC<WidgetForCarouselProps> = ({
analysis,
widgetValue,
layoutKind = 'total-and-delta',
sentimentDirection = 'negativeOnIncrease',
isLarge = true,
}) => {
const isHorizontal = !useBreakpoint('lg');

Expand All @@ -32,22 +30,7 @@ export const WidgetForCarousel: React.FC<WidgetForCarouselProps> = ({
<div className={classNames('flex flex-row items-baseline justify-between rounded-lg px-2')}>
<div className="flex flex-row items-baseline justify-end gap-4">
<div className="flex flex-row items-baseline gap-x-1">
<p
className={classNames(
'font-semibold text-gray-900',
isLarge ? 'text-2xl' : 'text-xl'
)}
>
{widgetValue.getFormattedValue()}
</p>
<p
className={classNames(
isLarge ? 'text-base' : 'text-sm',
'text-design-subtitleGrey'
)}
>
{widgetValue.getUnits()}
</p>
{widgetValue.getFormattedValue()}
</div>
<div className="mt-1 flex flex-row items-baseline gap-x-1">
{layoutKind !== 'no-delta' && (
Expand All @@ -71,22 +54,7 @@ export const WidgetForCarousel: React.FC<WidgetForCarouselProps> = ({
{widgetValue.value === undefined && <LoadingSpinner isWidget />}
<div className={classNames('flex flex-col items-start')}>
<div className="flex flex-row items-baseline gap-x-1">
<p
className={classNames(
'font-semibold leading-tight text-gray-900',
isLarge ? 'text-2xl' : 'text-xl'
)}
>
{widgetValue.getFormattedValue()}
</p>
<p
className={classNames(
isLarge ? 'text-base' : 'text-sm',
'leading-tight text-design-subtitleGrey'
)}
>
{widgetValue.getUnits()}
</p>
{widgetValue.getFormattedValue()}
</div>
<div className="flex flex-row items-baseline gap-x-1 ">
{layoutKind !== 'no-delta' && (
Expand Down
8 changes: 8 additions & 0 deletions common/components/widgets/internal/WidgetText.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
import React from 'react';

export interface WidgetTextProps {
text: string;
}
export const WidgetText: React.FC<WidgetTextProps> = ({ text }) => {
return <span className="text-2xl font-semibold text-gray-900">{text}</span>;
};
8 changes: 4 additions & 4 deletions common/constants/dates.ts
Original file line number Diff line number Diff line change
Expand Up @@ -209,10 +209,10 @@ export const OVERVIEW_OPTIONS: {
export type OverviewDatePresetKey = keyof typeof OverviewRangeTypes;

export enum OverviewRangeTypes {
'week' = 'Past Week',
'month' = 'Past Month',
'year' = 'Past Year',
'all' = 'All Time',
'week' = 'Past week',
'month' = 'Past month',
'year' = 'Past year',
'all' = 'All time',
}

export const RANGE_DATE_KEYS = Object.fromEntries(
Expand Down
10 changes: 5 additions & 5 deletions common/constants/pages.ts
Original file line number Diff line number Diff line change
Expand Up @@ -83,8 +83,8 @@ export const ALL_PAGES: PageMap = {
multiTrips: {
key: 'multiTrips',
path: '/trips/multi',
name: 'Multi Day Trips',
title: 'Multi Day Trips',
name: 'Multi-day trips',
title: 'Multi-day trips',
lines: ['line-red', 'line-blue', 'line-green', 'line-orange', 'line-bus'],
icon: faCalendar,
dateStoreSection: 'multiTrips',
Expand All @@ -93,7 +93,7 @@ export const ALL_PAGES: PageMap = {
overview: {
key: 'overview',
path: '/',
name: 'Line Overview',
name: 'Line overview',
lines: ['line-red', 'line-blue', 'line-green', 'line-orange'],
dateStoreSection: 'overview',
icon: faTableColumns,
Expand Down Expand Up @@ -121,7 +121,7 @@ export const ALL_PAGES: PageMap = {
slowzones: {
key: 'slowzones',
path: '/slowzones',
name: 'Slow Zones',
name: 'Slow zones',
lines: ['line-red', 'line-blue', 'line-orange'],
icon: faWarning,
dateStoreSection: 'line',
Expand All @@ -131,7 +131,7 @@ export const ALL_PAGES: PageMap = {
systemSlowzones: {
key: 'systemSlowzones',
path: '/slowzones',
name: 'Slow Zones',
name: 'Slow zones',
lines: [],
icon: faWarning,
dateStoreSection: 'system',
Expand Down
Loading

0 comments on commit f80a808

Please sign in to comment.