@vixoniccom/aqi 0.0.7-dev.1 → 0.0.8-dev.0

package/build/test/parameters.json

@@ -5,7 +5,7 @@
       "filename": "Earthquakes.png",
       "__isAsset": true
     },
-    "cityInput": "Concepcion",
+    "cityInput": "Santiago",
     "topSeparationCard": 200,
     "leftSeparationCard": 600,
     "cardWidth": 700,

package/configuration/appeareanceGroup/AppeareanceInputs.ts

@@ -1,7 +1,7 @@
 import { Label, NumberInput, SelectAssetKna, SelectInput, TextFormat, TextInput } from '@vixoniccom/modules'
 import { ShowValidations } from '../utils'
 
-const { personalizado, presetActive } = ShowValidations
+const { personalizado } = ShowValidations
 
 export const appeareanceInputs = [
   new Label({ label: 'Tema predefinido' }),
@@ -15,11 +15,6 @@ export const appeareanceInputs = [
       { label: 'Lateral', value: 'preset2' },
     ],
   }),
-  new Label({ label: 'Fuentes', show: presetActive }),
-  new TextFormat({ id: 'aqiFont', label: 'Fuente del índice de calidad del aire', show: presetActive }),
-  new TextFormat({ id: 'stationFont', label: 'Fuente de estación que realizó la medición', show: presetActive }),
-  new TextFormat({ id: 'qualityFont', label: 'Fuente del mensaje sobre la calidad del aire', show: presetActive }),
-
   new Label({ label: 'General' }),
   new SelectAssetKna({ id: 'backgroundImage', label: 'Fondo', required: false, extensions: ['jpg', 'png'] }),
   new Label({ label: 'Posición', show: personalizado }),
@@ -55,10 +50,22 @@ export const appeareanceInputs = [
     show: personalizado,
   }),
 
-  new Label({ label: 'Textos de la tarjeta', show: personalizado }),
-  new TextFormat({ id: 'aqiFormat', label: 'Formato del índice de calidad del aire', show: personalizado }),
-  new TextFormat({ id: 'stationFormat', label: 'Formato de estación que realizó la medición', show: personalizado }),
-  new TextFormat({ id: 'qualityFormat', label: 'Formato del mensaje sobre la calidad del aire', show: personalizado }),
+  new Label({ label: 'Textos de la tarjeta' }),
+  new TextFormat({
+    id: 'aqiFormat',
+    label: 'Formato del índice de calidad del aire',
+    description: 'Fuente, color, tamaño y alineación del índice. Por defecto, 6vh.',
+  }),
+  new TextFormat({
+    id: 'stationFormat',
+    label: 'Formato de estación que realizó la medición',
+    description: 'Fuente, color, tamaño y alineación de la estación. Por defecto, 3vh.',
+  }),
+  new TextFormat({
+    id: 'qualityFormat',
+    label: 'Formato del mensaje sobre la calidad del aire',
+    description: 'Fuente, color, tamaño y alineación del mensaje de calidad. Por defecto, 3vh.',
+  }),
 
   new Label({ label: 'Datos' }),
   new TextInput({
@@ -67,6 +74,14 @@ export const appeareanceInputs = [
     description:
       'Ciudad de la que se quiere medir el aire. Para ver la ciudades disponibles se puede consultar aquí: https://aqicn.org/here',
   }),
-  new TextInput({ id: 'msj0', label: 'Mensaje sin Datos' }),
-  new TextFormat({ id: 'formatMjs', label: 'Formato Mensaje sin Datos' }),
+  new TextInput({
+    id: 'msj0',
+    label: 'Mensaje sin Datos',
+    description: 'Texto que se muestra cuando no hay datos. Por defecto, "No hay datos para mostrar".',
+  }),
+  new TextFormat({
+    id: 'formatMjs',
+    label: 'Formato Mensaje sin Datos',
+    description: 'Fuente, color, tamaño y alineación del mensaje. Por defecto, 3vh.',
+  }),
 ]

package/configuration/utils.ts

@@ -1,4 +1,3 @@
 export const ShowValidations = {
   personalizado: '({{themePreset}} === "personalizado" || !{{themePreset}})',
-  presetActive: '{{themePreset}} && {{themePreset}} !== "personalizado"',
 }

package/configuration.json

@@ -29,29 +29,6 @@
             }
           ]
         },
-        {
-          "type": "label",
-          "label": "Fuentes",
-          "show": "{{themePreset}} && {{themePreset}} !== \"personalizado\""
-        },
-        {
-          "id": "aqiFont",
-          "label": "Fuente del índice de calidad del aire",
-          "show": "{{themePreset}} && {{themePreset}} !== \"personalizado\"",
-          "type": "text-format"
-        },
-        {
-          "id": "stationFont",
-          "label": "Fuente de estación que realizó la medición",
-          "show": "{{themePreset}} && {{themePreset}} !== \"personalizado\"",
-          "type": "text-format"
-        },
-        {
-          "id": "qualityFont",
-          "label": "Fuente del mensaje sobre la calidad del aire",
-          "show": "{{themePreset}} && {{themePreset}} !== \"personalizado\"",
-          "type": "text-format"
-        },
         {
           "type": "label",
           "label": "General"
@@ -133,26 +110,25 @@
         },
         {
           "type": "label",
-          "label": "Textos de la tarjeta",
-          "show": "({{themePreset}} === \"personalizado\" || !{{themePreset}})"
+          "label": "Textos de la tarjeta"
         },
         {
           "id": "aqiFormat",
           "label": "Formato del índice de calidad del aire",
-          "show": "({{themePreset}} === \"personalizado\" || !{{themePreset}})",
-          "type": "text-format"
+          "type": "text-format",
+          "description": "Fuente, color, tamaño y alineación del índice. Por defecto, 6vh."
         },
         {
           "id": "stationFormat",
           "label": "Formato de estación que realizó la medición",
-          "show": "({{themePreset}} === \"personalizado\" || !{{themePreset}})",
-          "type": "text-format"
+          "type": "text-format",
+          "description": "Fuente, color, tamaño y alineación de la estación. Por defecto, 3vh."
         },
         {
           "id": "qualityFormat",
           "label": "Formato del mensaje sobre la calidad del aire",
-          "show": "({{themePreset}} === \"personalizado\" || !{{themePreset}})",
-          "type": "text-format"
+          "type": "text-format",
+          "description": "Fuente, color, tamaño y alineación del mensaje de calidad. Por defecto, 3vh."
         },
         {
           "type": "label",
@@ -167,12 +143,14 @@
         {
           "id": "msj0",
           "label": "Mensaje sin Datos",
-          "type": "text-input"
+          "type": "text-input",
+          "description": "Texto que se muestra cuando no hay datos. Por defecto, \"No hay datos para mostrar\"."
         },
         {
           "id": "formatMjs",
           "label": "Formato Mensaje sin Datos",
-          "type": "text-format"
+          "type": "text-format",
+          "description": "Fuente, color, tamaño y alineación del mensaje. Por defecto, 3vh."
         }
       ]
     }

package/package.json

@@ -8,7 +8,7 @@
   "author": {
     "name": "Daniel Alvayay"
   },
-  "version": "0.0.7-dev.1",
+  "version": "0.0.8-dev.0",
   "scripts": {
     "prepublish": "vixonic-module-packager --mode=build",
     "watch": "vixonic-module-packager --mode=watch",

package/src/App.tsx

@@ -4,10 +4,8 @@ import { FontLoader } from './components/FontLoader'
 import { FormattedText } from './components/FormattedText'
 import { AqiData } from './types'
 import { getData } from './services'
-import preset1 from './presets/preset1.json'
-import preset2 from './presets/preset2.json'
-
-const PRESETS = { preset1, preset2 } as Record<string, Partial<VixonicParameters>>
+import { PRESETS } from './presets'
+import { DEFAULT_EMPTY_MESSAGE, DEFAULT_EMPTY_MESSAGE_FONT_SIZE, withFontSize } from './components/textFormatDefaults'
 
 interface Props {
   data: VixonicData
@@ -17,29 +15,27 @@ interface Props {
 export const App: React.FunctionComponent<Props> = ({ data, start }) => {
   const { parameters: rawParameters, downloadsPath } = data
 
-  const withFont = (format: VixonicParameters['aqiFormat'], fontFormat: VixonicParameters['aqiFont']) => {
-    if (!fontFormat) return format
-    const { font, fontColor } = fontFormat
-    return { ...format, ...(font ? { font } : {}), ...(fontColor ? { fontColor } : {}) }
-  }
-
   const activePreset = rawParameters.themePreset && rawParameters.themePreset !== 'personalizado'
     ? PRESETS[rawParameters.themePreset]
     : undefined
 
   const parameters: VixonicParameters = activePreset
-    ? {
-        ...rawParameters,
+    ? ({
         ...activePreset,
-        aqiFormat: withFont(activePreset.aqiFormat, rawParameters.aqiFont),
-        stationFormat: withFont(activePreset.stationFormat, rawParameters.stationFont),
-        qualityFormat: withFont(activePreset.qualityFormat, rawParameters.qualityFont),
-      }
+        themePreset: rawParameters.themePreset,
+        backgroundImage: rawParameters.backgroundImage,
+        cityInput: rawParameters.cityInput,
+        msj0: rawParameters.msj0,
+        formatMjs: rawParameters.formatMjs,
+        aqiFormat: rawParameters.aqiFormat,
+        stationFormat: rawParameters.stationFormat,
+        qualityFormat: rawParameters.qualityFormat,
+      } as VixonicParameters)
     : rawParameters
   const backgroundImageState = parameters.backgroundImage ? `url('${downloadsPath}/${parameters.backgroundImage.filename}')` : ''
   const [formattedData, setFormattedData] = useState<AqiData>()
   const cityInput = parameters?.cityInput || "Santiago"
-  const msj0 = parameters?.msj0 || 'No hay datos para mostrar'
+  const msj0 = parameters?.msj0 || DEFAULT_EMPTY_MESSAGE
   const updateTime = 600000
 
   useEffect(() => {
@@ -103,7 +99,7 @@ export const App: React.FunctionComponent<Props> = ({ data, start }) => {
           }}>
             <FontLoader paths={['formatMjs.font']} parameters={parameters} downloadsPath={downloadsPath} />
             <div style={{ display: 'flex', position: 'relative', flex: '1 1 0%', flexDirection: 'column' }}>
-              <FormattedText text={msj0} format={parameters?.formatMjs} />
+              <FormattedText text={msj0} format={withFontSize(parameters?.formatMjs, DEFAULT_EMPTY_MESSAGE_FONT_SIZE)} />
             </div>
           </div>
         )}

package/src/components/Card.tsx

@@ -3,6 +3,12 @@ import { assingAirQuality } from '../utils';
 import { AqiData } from '../types';
 import { TextFormat } from '@vixoniccom/modules';
 import { FormattedText } from './FormattedText';
+import {
+  DEFAULT_AQI_FONT_SIZE,
+  DEFAULT_QUALITY_FONT_SIZE,
+  DEFAULT_STATION_FONT_SIZE,
+  withFontSize,
+} from './textFormatDefaults';
 
 interface Props {
   data: AqiData;
@@ -36,21 +42,21 @@ export const Card: React.FunctionComponent<Props> = ({ data, format }) => {
           textAlign: `${format.aqiFormat?.alignment?.horizontal || 'left'}`,
           padding: `${format.cardGap || 2}rem`
         }}>
-          <FormattedText text={String(data?.aqi)} format={format.aqiFormat} />
+          <FormattedText text={String(data?.aqi)} format={withFontSize(format.aqiFormat, DEFAULT_AQI_FONT_SIZE)} />
         </div>
       )}
       <div style={{
         textAlign: `${format.stationFormat?.alignment?.horizontal || 'left'}`,
         padding: `${format.cardGap || 2}rem`,
       }}>
-        <FormattedText text={city} format={format.stationFormat} />
+        <FormattedText text={city} format={withFontSize(format.stationFormat, DEFAULT_STATION_FONT_SIZE)} />
       </div>
       <div style={{
         textAlign: `${format.qualityFormat?.alignment?.horizontal || 'left'}`,
         padding: `${format.cardGap || 2}rem`,
         marginTop: format.positionCard === 'horizontal' ? undefined : '1rem'
       }}>
-        <FormattedText text={data?.aqi ? quality : ''} format={format.qualityFormat} />
+        <FormattedText text={data?.aqi ? quality : ''} format={withFontSize(format.qualityFormat, DEFAULT_QUALITY_FONT_SIZE)} />
       </div>
     </div>
   )

package/src/components/FormattedText.tsx

@@ -61,7 +61,7 @@ export const FormattedText: React.FunctionComponent<Props> = ({ text, format, ma
       <span style={{
         color: format?.fontColor,
         fontFamily: checkNested(format, 'font.filename') ? `'${format?.font?.filename?.replace('.', '-')}'` : '',
-        fontSize: `${format?.fontSize}${unit}`,
+        fontSize: format?.fontSize ? `${format.fontSize}${unit}` : undefined,
         textAlign: checkNested(format, 'alignment.horizontal') ? format?.alignment?.horizontal : 'left',
         lineHeight: lineHeight,
         paddingBottom: paddingBottom,

package/src/components/textFormatDefaults.ts

@@ -0,0 +1,12 @@
+export const DEFAULT_AQI_FONT_SIZE = 6
+export const DEFAULT_STATION_FONT_SIZE = 3
+export const DEFAULT_QUALITY_FONT_SIZE = 3
+export const DEFAULT_EMPTY_MESSAGE_FONT_SIZE = 3
+export const DEFAULT_EMPTY_MESSAGE = 'No hay datos para mostrar'
+
+type TextFormatValue = VixonicParameters['aqiFormat']
+
+export const withFontSize = (format: TextFormatValue, defaultFontSize: number): TextFormatValue => ({
+  ...format,
+  fontSize: format?.fontSize || defaultFontSize,
+})

package/src/parameters.d.ts

@@ -5,5 +5,5 @@ declare type VixonicData = {
 }
 
 declare type VixonicParameters = Partial<{
-  themePreset: 'personalizado' | 'preset1' | 'preset2', aqiFont: { fontSize?: number, fontColor?: string, alignment?: { horizontal?: 'left' | 'right' | 'center' }, font?: { filename: string, id: string, __isAsset: true } }, stationFont: { fontSize?: number, fontColor?: string, alignment?: { horizontal?: 'left' | 'right' | 'center' }, font?: { filename: string, id: string, __isAsset: true } }, qualityFont: { fontSize?: number, fontColor?: string, alignment?: { horizontal?: 'left' | 'right' | 'center' }, font?: { filename: string, id: string, __isAsset: true } }, backgroundImage: {id?: string, filename?: string, extension?: string}, positionCard: 'horizontal' | 'vertical', topSeparationCard: number, leftSeparationCard: number, cardWidth: number, cardHeight: number, cardGap: number, aqiFormat: { fontSize?: number, fontColor?: string, alignment?: { horizontal?: 'left' | 'right' | 'center' }, font?: { filename: string, id: string, __isAsset: true } }, stationFormat: { fontSize?: number, fontColor?: string, alignment?: { horizontal?: 'left' | 'right' | 'center' }, font?: { filename: string, id: string, __isAsset: true } }, qualityFormat: { fontSize?: number, fontColor?: string, alignment?: { horizontal?: 'left' | 'right' | 'center' }, font?: { filename: string, id: string, __isAsset: true } }, cityInput: string, msj0: string, formatMjs: { fontSize?: number, fontColor?: string, alignment?: { horizontal?: 'left' | 'right' | 'center' }, font?: { filename: string, id: string, __isAsset: true } }
+  themePreset: 'personalizado' | 'preset1' | 'preset2', backgroundImage: {id?: string, filename?: string, extension?: string}, positionCard: 'horizontal' | 'vertical', topSeparationCard: number, leftSeparationCard: number, cardWidth: number, cardHeight: number, cardGap: number, aqiFormat: { fontSize?: number, fontColor?: string, alignment?: { horizontal?: 'left' | 'right' | 'center' }, font?: { filename: string, id: string, __isAsset: true } }, stationFormat: { fontSize?: number, fontColor?: string, alignment?: { horizontal?: 'left' | 'right' | 'center' }, font?: { filename: string, id: string, __isAsset: true } }, qualityFormat: { fontSize?: number, fontColor?: string, alignment?: { horizontal?: 'left' | 'right' | 'center' }, font?: { filename: string, id: string, __isAsset: true } }, cityInput: string, msj0: string, formatMjs: { fontSize?: number, fontColor?: string, alignment?: { horizontal?: 'left' | 'right' | 'center' }, font?: { filename: string, id: string, __isAsset: true } }
 }>

package/src/presets/index.ts

@@ -0,0 +1,19 @@
+import preset1Json from './preset1.json'
+import preset2Json from './preset2.json'
+
+type PresetStyleKey =
+  | 'positionCard'
+  | 'topSeparationCard'
+  | 'leftSeparationCard'
+  | 'cardWidth'
+  | 'cardHeight'
+  | 'cardGap'
+
+type PresetCompleteness = Record<PresetStyleKey, unknown>
+
+const assertPresetComplete = <T extends PresetCompleteness>(preset: T): T => preset
+
+const preset1 = assertPresetComplete(preset1Json)
+const preset2 = assertPresetComplete(preset2Json)
+
+export const PRESETS = { preset1, preset2 } as Record<string, Partial<VixonicParameters>>

package/src/presets/preset1.json

@@ -4,19 +4,5 @@
   "leftSeparationCard": 400,
   "cardWidth": 700,
   "cardHeight": 120,
-  "aqiFormat": {
-    "fontSize": 25,
-    "fontColor": "#ffffff",
-    "alignment": { "horizontal": "center" }
-  },
-  "stationFormat": {
-    "fontSize": 16,
-    "fontColor": "#ffffff",
-    "alignment": { "horizontal": "center" }
-  },
-  "qualityFormat": {
-    "fontSize": 20,
-    "fontColor": "#ffffff",
-    "alignment": { "horizontal": "center" }
-  }
+  "cardGap": 2
 }

package/src/presets/preset2.json

@@ -4,20 +4,5 @@
   "leftSeparationCard": 116,
   "cardWidth": 194,
   "cardHeight": 316,
-  "cardGap": 1,
-  "aqiFormat": {
-    "fontSize": 10,
-    "fontColor": "#ffffff",
-    "alignment": { "horizontal": "center" }
-  },
-  "stationFormat": {
-    "fontSize": 4,
-    "fontColor": "#ffffff",
-    "alignment": { "horizontal": "center" }
-  },
-  "qualityFormat": {
-    "fontSize": 3,
-    "fontColor": "#ffffff",
-    "alignment": { "horizontal": "center" }
-  }
+  "cardGap": 1
 }

package/src/test/parameters.json

@@ -5,7 +5,7 @@
       "filename": "Earthquakes.png",
       "__isAsset": true
     },
-    "cityInput": "Concepcion",
+    "cityInput": "Santiago",
     "topSeparationCard": 200,
     "leftSeparationCard": 600,
     "cardWidth": 700,