feat: digital clock

Author: hugohaggmark

provisioning/dashboards/digital-sizes.json

@@ -5,6 +5,7 @@ import {
   ClockMode,
   ClockRefresh,
   ClockSource,
+  ClockStyle,
   ClockType,
   CountdownQueryCalculation,
   CountupQueryCalculation,
@@ -489,6 +490,7 @@ const getDefaultProps = () => {
       clockType: ClockType.H24,
       mode: ClockMode.time,
       refresh: ClockRefresh.sec,
+      style: ClockStyle.text,
       countdownSettings: {
         source: ClockSource.input,
         queryCalculation: CountdownQueryCalculation.lastNotNull,

provisioning/dashboards/digital.json

@@ -73,11 +73,13 @@ export function ClockPanel(props: Props) {
         height,
       }}
     >
-      {dateSettings.showDate ? <RenderDate now={now} options={props.options} /> : null}
-      <RenderTime options={props.options} targetTime={targetTime} err={err} now={now} />
-      {timezoneSettings.showTimezone ? <RenderZone now={now} options={props.options} timezone={timezoneToUse} /> : null}
+      {dateSettings.showDate ? <RenderDate now={now} options={props.options} width={width} height={height} /> : null}
+      <RenderTime options={props.options} targetTime={targetTime} err={err} now={now} width={width} height={height} />
+      {timezoneSettings.showTimezone ? (
+        <RenderZone now={now} options={props.options} timezone={timezoneToUse} width={width} height={height} />
+      ) : null}
       {props.options.descriptionSettings.source !== DescriptionSource.none ? (
-        <RenderDescription options={props.options} descriptionText={descriptionText} />
+        <RenderDescription options={props.options} descriptionText={descriptionText} width={width} height={height} />
       ) : null}
     </div>
   );

src/ClockPanel.test.tsx

@@ -1,9 +1,28 @@
 import { css } from '@emotion/css';
 import { Moment } from 'moment-timezone';
 import React, { useMemo } from 'react';
-import { ClockOptions } from 'types';
+import { ClockOptions, ClockStyle } from '../types';
+import { useTheme2 } from '@grafana/ui';
+import { DigitalTime } from './digital/DigitalTime';
+import { getHeights } from './digital/utils';
+
+export function RenderDate({
+  options,
+  now,
+  width,
+  height,
+}: {
+  options: ClockOptions;
+  now: Moment;
+  width: number;
+  height: number;
+}) {
+  const theme = useTheme2();
+  const fill =
+    options.style === ClockStyle.digital && options.digitalSettings?.fillColor
+      ? theme.visualization.getColorByName(options.digitalSettings.fillColor)
+      : '';
 
-export function RenderDate({ options, now }: { options: ClockOptions; now: Moment }) {
   const { dateSettings } = options;
 
   const className = useMemo(() => {
@@ -12,11 +31,16 @@ export function RenderDate({ options, now }: { options: ClockOptions; now: Momen
       font-weight: ${dateSettings.fontWeight};
       font-family: ${options.fontMono ? 'monospace' : ''};
       margin: 0;
+      color: ${fill};
     `;
-  }, [dateSettings.fontSize, dateSettings.fontWeight, options.fontMono]);
+  }, [dateSettings.fontSize, dateSettings.fontWeight, options.fontMono, fill]);
 
   const display = now.locale(dateSettings.locale || '').format(dateSettings.dateFormat);
 
+  if (options.style === ClockStyle.digital) {
+    return <DigitalTime width={width} height={getHeights(height, options).date} options={options} text={display} />;
+  }
+
   return (
     <span>
       <h3 className={className}>{display}</h3>

src/ClockPanel.tsx

@@ -1,18 +1,48 @@
 import { css } from '@emotion/css';
+import { useTheme2 } from '@grafana/ui';
 import React, { useMemo } from 'react';
-import { ClockOptions } from 'types';
+import { ClockOptions, ClockStyle } from 'types';
+import { DigitalTime } from './digital/DigitalTime';
+import { getHeights } from './digital/utils';
 
-export function RenderDescription({ options, descriptionText }: { options: ClockOptions; descriptionText: string }) {
+export function RenderDescription({
+  options,
+  descriptionText,
+  width,
+  height,
+}: {
+  options: ClockOptions;
+  descriptionText: string;
+  width: number;
+  height: number;
+}) {
   const { descriptionSettings } = options;
+  const theme = useTheme2();
+  const fill =
+    options.style === ClockStyle.digital && options.digitalSettings?.fillColor
+      ? theme.visualization.getColorByName(options.digitalSettings.fillColor)
+      : '';
 
   const className = useMemo(() => {
     return css`
       font-size: ${descriptionSettings.fontSize};
       font-weight: ${descriptionSettings.fontWeight};
       font-family: ${options.fontMono ? 'monospace' : ''};
       margin: 0;
+      color: ${fill};
     `;
-  }, [descriptionSettings.fontSize, descriptionSettings.fontWeight, options.fontMono]);
+  }, [descriptionSettings.fontSize, descriptionSettings.fontWeight, options.fontMono, fill]);
+
+  if (options.style === ClockStyle.digital) {
+    return (
+      <DigitalTime
+        width={width}
+        height={getHeights(height, options).description}
+        options={options}
+        text={descriptionText}
+      />
+    );
+  }
 
   return (
     <span>

src/components/RenderDate.tsx

@@ -2,7 +2,10 @@ import { css } from '@emotion/css';
 import { t } from '@grafana/i18n';
 import moment, { Moment } from 'moment-timezone';
 import React, { useMemo } from 'react';
-import { ClockMode, ClockOptions, ClockType, TimeSettings } from 'types';
+import { ClockMode, ClockOptions, ClockStyle, ClockType, TimeSettings } from 'types';
+import { DigitalTime } from './digital/DigitalTime';
+import { getHeights } from './digital/utils';
+import { useTheme2 } from '@grafana/ui';
 
 function getStrings() {
   const oneYear = t('components.RenderTime.getStrings.oneYear', '1 year');
@@ -150,26 +153,31 @@ function getTimeFormat(clockType: ClockType, timeSettings: TimeSettings): string
   return 'HH:mm:ss';
 }
 
-export function RenderTime({
-  now,
-  options,
-  targetTime,
-  err,
-}: {
+interface RenderTimeProps {
   now: moment.Moment;
   options: ClockOptions;
   targetTime: moment.Moment;
   err: string | null;
-}) {
+  width: number;
+  height: number;
+}
+
+export function RenderTime({ now, options, targetTime, err, width, height }: RenderTimeProps) {
   const { clockType, timeSettings, mode } = options;
+  const theme = useTheme2();
+  const fill =
+    options.style === ClockStyle.digital && options.digitalSettings?.fillColor
+      ? theme.visualization.getColorByName(options.digitalSettings.fillColor)
+      : '';
   const className = useMemo(() => {
     return css`
       font-size: ${timeSettings.fontSize};
       font-family: ${options.fontMono ? 'monospace' : ''};
       font-weight: ${timeSettings.fontWeight};
+      color: ${fill};
       margin: 0;
     `;
-  }, [options.fontMono, timeSettings.fontSize, timeSettings.fontWeight]);
+  }, [options.fontMono, timeSettings.fontSize, timeSettings.fontWeight, fill]);
 
   let display = '';
   if (err !== null) {
@@ -196,5 +204,9 @@ export function RenderTime({
       break;
   }
 
+  if (options.style === ClockStyle.digital) {
+    return <DigitalTime text={display} width={width} height={getHeights(height, options).time} options={options} />;
+  }
+
   return <h2 className={className}>{display}</h2>;
 }

src/components/RenderDescription.tsx

@@ -1,22 +1,43 @@
 import { css } from '@emotion/css';
 import { Moment } from 'moment-timezone';
 import React, { useMemo } from 'react';
-import { ClockOptions, ZoneFormat } from 'types';
-import { getMoment } from 'utils';
+import { ClockOptions, ClockStyle, ZoneFormat } from '../types';
+import { getMoment } from '../utils';
+import { useTheme2 } from '@grafana/ui';
+import { DigitalTime } from './digital/DigitalTime';
+import { getHeights } from './digital/utils';
 
-export function RenderZone({ options, now, timezone }: { options: ClockOptions; now: Moment; timezone: string }) {
+export function RenderZone({
+  options,
+  now,
+  timezone,
+  width,
+  height,
+}: {
+  options: ClockOptions;
+  now: Moment;
+  timezone: string;
+  width: number;
+  height: number;
+}) {
   const { timezoneSettings } = options;
   const { zoneFormat } = timezoneSettings;
 
+  const theme = useTheme2();
+  const fill =
+    options.style === ClockStyle.digital && options.digitalSettings?.fillColor
+      ? theme.visualization.getColorByName(options.digitalSettings.fillColor)
+      : '';
   const className = useMemo(() => {
     return css`
       font-size: ${timezoneSettings.fontSize};
       font-weight: ${timezoneSettings.fontWeight};
       font-family: ${options.fontMono ? 'monospace' : ''};
       line-height: 1.4;
       margin: 0;
+      color: ${fill};
     `;
-  }, [options.fontMono, timezoneSettings.fontSize, timezoneSettings.fontWeight]);
+  }, [options.fontMono, timezoneSettings.fontSize, timezoneSettings.fontWeight, fill]);
 
   let zone = timezone;
 
@@ -38,6 +59,11 @@ export function RenderZone({ options, now, timezone }: { options: ClockOptions;
       }
   }
 
+  if (options.style === ClockStyle.digital) {
+    const text = zoneFormat === ZoneFormat.nameOffset ? `${zone}\n${now.format('Z z')}` : zone;
+    return <DigitalTime width={width} height={getHeights(height, options).zone} options={options} text={text} />;
+  }
+
   return (
     <h4 className={className} data-testid="time-zone">
       {zone}

src/components/RenderTime.tsx

@@ -0,0 +1,39 @@
+import React from 'react';
+
+interface ColonProps {
+  char: string;
+  stroke: string;
+  strokeWidth: number;
+  fill: string;
+  filter: string;
+  x?: number;
+}
+
+export function Colon({ char, fill, filter, stroke, strokeWidth, x = 0 }: ColonProps) {
+  if (char !== ':') {
+    return null;
+  }
+
+  const transform = `translate(${x}, 0)`;
+
+  return (
+    <>
+      <path
+        d="M 73.5,47.317565 L 89,55.991045 L 89,76.508955 L 73.5,85.182435 L 58,76.508955 L 58,55.991045 L 73.5,47.317565 z "
+        stroke={stroke}
+        strokeWidth={strokeWidth}
+        fill={fill}
+        filter={filter}
+        transform={transform}
+      />
+      <path
+        d="M 73.5,129.375003 L 89,138.048483 L 89,158.566393 L 73.5,167.239873 L 58,158.566393 L 58,138.048483 L 73.5,129.375003 z "
+        stroke={stroke}
+        strokeWidth={strokeWidth}
+        fill={fill}
+        filter={filter}
+        transform={transform}
+      />
+    </>
+  );
+}

src/components/RenderZone.tsx

@@ -0,0 +1,29 @@
+import React from 'react';
+
+interface DashProps {
+  char: string;
+  stroke: string;
+  strokeWidth: number;
+  fill: string;
+  filter: string;
+  x?: number;
+}
+
+export function Dash({ char, fill, filter, stroke, strokeWidth, x = 0 }: DashProps) {
+  if (char !== '-') {
+    return null;
+  }
+
+  const transform = `translate(${x}, 0)`;
+
+  return (
+    <path
+      d="M 118.29731,107 L 103.08534,122.5 L 44.08535,122.5 L 28.56756,107 L 44.08535,91.5 L 103.08534,91.5 L 118.29731,107 z "
+      stroke={stroke}
+      strokeWidth={strokeWidth}
+      fill={fill}
+      filter={filter}
+      transform={transform}
+    />
+  );
+}