Merge pull request #10 from RocketCommunicationsInc/mj.9.5.1

Mj.9.5.1

.gitignore

@@ -28,4 +28,5 @@ e2e-results/
 
 # Editors
 .idea
+.vscode
 

README.md

@@ -1,6 +1,6 @@
 ## About This Plugin
 
-This panel plugin is primarly a theme plugin. It provides CSS style overrides for the Grafana dashboard in order to theme the dashboard with [Astro UXDS](https://www.astrouxds.com) colors and typography. It also provides options for a classification banner, clock, light/dark theme switching, and setting a default theme. Due to Grafana limitations, the Astro plugin _must be visible_ in order to take effect. Navigation inside of the Grafana dashboard will retain the plugin's overrides, but moving away from the dashboard will cause the styles to revert back to Grafana defaults.
+This panel plugin is primarly a theme plugin. It provides CSS style overrides for the Grafana dashboard in order to theme the dashboard with the [Astro UXDS](https://www.astrouxds.com) design system. It also provides options for a classification banner, clock, light/dark theme switching, and setting a default theme. The Astro Panel _must_ be added to a dashboard in order for styles to take effect. Navigation inside of the Grafana dashboard will retain the plugin's overrides, but moving away from the dashboard will cause the styles to revert back to Grafana defaults.
 
 ## Panel Options
 
@@ -14,7 +14,13 @@ This panel plugin is primarly a theme plugin. It provides CSS style overrides fo
   - Shows or hides the clock.
 - Format
   - Allows user to choose left, center, or right alignment for the panel content.
+- Hide Astro Panel
+  - Hides the Astro Panel from the dashboard, but retains the style overrides the panel provdies.
 
 ## MIL-STD 1472 Compliance
 
 The Astro plugin for Grafana implements the AstroUX Design System and implements requirements for Section 5.17 of MIL-STD 1472 compliance as documented at https://www.astrouxds.com/compliance/mil-std-1472/ the Astro plugin does not impact or account for core Grafana functionality. No review of Grafana’s core functionality is implied or warranted by this statement. Any user generated content is not implied or warranted. It is the responsibility of implementors and 3rd party tools to evaluate and implement any 1472 compliance. For questions or comments please contact [email protected].
+
+## Support
+
+For any issues or ideas, please see [the github page](https://github.com/RocketCommunicationsInc/grafana-theme).

package.json

@@ -1,6 +1,6 @@
 {
   "name": "rocket-communications-astro",
-  "version": "1.0.6",
+  "version": "1.1.0",
   "description": "An Astro UXDS theme for Grafana dashboards.",
   "scripts": {
     "build": "grafana-toolkit plugin:build",

src/Clock.tsx

@@ -1,7 +1,8 @@
-import React, { useState, useEffect } from 'react';
+import { Mode, useAstroTokens } from 'use-astro-tokens';
+import React, { useEffect, useState } from 'react';
+
 import { DefaultTheme } from 'types';
 import { Global } from '@emotion/react';
-import { useAstroTokens, Mode } from 'use-astro-tokens';
 import { getDayOfYear } from 'date-fns';
 
 interface Props {
@@ -46,7 +47,7 @@ export const Clock: React.FC<Props> = (props) => {
         <div className="date-label">Date</div>
       </div>
       <div className="time-container">
-        <div className="time">{clockTime} UTC</div>
+        <div className="time">{clockTime}UTC</div>
         <div className="time-label">Time</div>
       </div>
       <Global
@@ -59,7 +60,7 @@ export const Clock: React.FC<Props> = (props) => {
             alignItems: 'center',
             width: 'fit-content',
             margin: astro.spacing(2),
-            fontFamily: astro.typography.monospace.fontFamily,
+            ...astro.typography.monospace,
             '.date-container': {
               display: 'flex',
               flexDirection: 'column',
@@ -116,6 +117,8 @@ export const Clock: React.FC<Props> = (props) => {
                 height: astro.spacing(10),
                 padding: astro.spacing(0, 3),
                 border: `1px solid ${astro.color.background.surface.default}`,
+                ...astro.typography.monospace,
+                fontVariantNumeric: 'tabular-nums',
               },
             },
           },

src/module.ts

@@ -1,6 +1,6 @@
-import { PanelPlugin } from '@grafana/data';
 import { AstroOptions } from './types';
 import { AstroPanel } from './AstroPanel';
+import { PanelPlugin } from '@grafana/data';
 
 export const plugin = new PanelPlugin<AstroOptions>(AstroPanel).setPanelOptions((builder) => {
   builder.addRadio({
@@ -25,6 +25,13 @@ export const plugin = new PanelPlugin<AstroOptions>(AstroPanel).setPanelOptions(
     path: 'hideTheme',
     defaultValue: false,
   });
+  builder.addBooleanSwitch({
+    name: 'Hide Astro Panel',
+    path: 'hidePanel',
+    defaultValue: false,
+    description:
+      'Hides the Astro panel entirely, allowing for extra dashboard space but retaining the styling the panel provides. If enabled, you may need to edit the JSON model to see the panel options again.',
+  });
   builder.addSelect({
     path: 'classification',
     name: 'Classification',

src/types.ts

@@ -16,4 +16,5 @@ export interface AstroOptions {
   classification: Classification;
   clock: boolean;
   format: Format;
+  hidePanel: boolean;
 }

tsconfig.json

@@ -2,6 +2,7 @@
   "extends": "./node_modules/@grafana/toolkit/src/config/tsconfig.plugin.json",
   "include": ["src", "types"],
   "compilerOptions": {
+    "jsx": "react",
     "rootDir": "./src",
     "baseUrl": "./src",
     "typeRoots": ["./node_modules/@types"]