📁 Showcase
Dashboard

Dashboard

Backend

1. Dashboard report

a. Input form

ensure form FilterActivityDashboard
  modules: ["Fitness"]
ensure section: Details
ensure field FromDate kind: date
  required: true
  defaultValue: "startOfWeek"
  displayDateFormat: "dd/MM/yyyy, hh:mm:ss a"
ensure field ToDate kind: date
  required: true
  defaultValue: "endOfWeek"
  displayDateFormat: "dd/MM/yyyy, hh:mm:ss a"

b. Output form

ensure form OutputActivityDashboard
  modules: ["Fitness"]
ensure grid: ConsumedVsBurned
ensure field Date kind: date
ensure field ConsumedCalories kind: number
ensure field BurnedCalories kind: number

ensure grid: ConsumedCalories
ensure field Date kind: date
ensure field TotalCaloriesCount kind: number
  label: "Total calories count"

ensure grid: BurnedCalories
ensure field Date kind: date
ensure field TotalCaloriesBurned kind: number
  label: "Total calories burned"

ensure grid: Sleep
ensure field Date kind: date
ensure field TotalHours kind: number
  label: "Total hours"

ensure grid: WaterIntake
ensure field Date kind: date
ensure field TotalIntake kind: number
  label: "Total intake"
  suffix: "ml"

c. Form layout

ensure form OutputActivityDashboard
ensure grid: ConsumedVsBurned
ensure layoutGrid XYChart kind: xyChartBarGraph
  xAxis: ConsumedVsBurned.Date
ensure yAxis AxisY1 color.value: green color.shade: s300
  field: ConsumedVsBurned.ConsumedCalories
ensure yAxis AxisY2 color.value: deepOrange color.shade: s300
  field: ConsumedVsBurned.BurnedCalories

ensure layoutGrid LineChart kind: xyChartLineChart
  xAxis: ConsumedVsBurned.Date
ensure yAxis AxisY1 color.value: green color.shade: s300
  field: ConsumedVsBurned.ConsumedCalories
ensure yAxis AxisY2 color.value: deepOrange color.shade: s300
  field: ConsumedVsBurned.BurnedCalories

ensure grid: ConsumedCalories
ensure layoutGrid XYChart kind: xyChartBarGraph
  xAxis: ConsumedCalories.Date
ensure xAxis AxisX color.value: green color.shade: s300
ensure yAxis AxisY1 color.value: green color.shade: s300
  field: ConsumedCalories.TotalCaloriesCount

ensure layoutGrid LineChart kind: xyChartLineChart
  xAxis: ConsumedCalories.Date
ensure xAxis AxisX color.value: green color.shade: s300
ensure yAxis AxisY1 color.value: green color.shade: s300
  field: ConsumedCalories.TotalCaloriesCount

ensure layoutGrid Table kind: table
  columnSizeSet: ["Flex"]
  showComps: [ConsumedCalories.Date, ConsumedCalories.TotalCaloriesCount]

ensure grid: BurnedCalories
ensure layoutGrid XYChart kind: xyChartBarGraph
  xAxis: BurnedCalories.Date
ensure xAxis AxiscX color.value: deepOrange color.shade: s300
  field: BurnedCalories.TotalCaloriesBurned
ensure yAxis AxisY color.value: deepOrange color.shade: s300
  field: BurnedCalories.TotalCaloriesBurned

ensure layoutGrid LineChart kind: xyChartLineChart
  xAxis: BurnedCalories.Date
ensure xAxis AxiscX color.value: deepOrange color.shade: s300
  field: BurnedCalories.TotalCaloriesBurned
ensure yAxis AxisY color.value: deepOrange color.shade: s300
  field: BurnedCalories.TotalCaloriesBurned

ensure grid: Sleep
ensure layoutGrid XYChart kind: xyChartBarGraph xAxis: Sleep.Date
ensure yAxis AxisY field: Sleep.TotalHours

ensure grid: WaterIntake
ensure layoutGrid XYChart kind: xyChartBarGraph
  xAxis: WaterIntake.Date
ensure xAxis AxisAiBg0X color.value: blue color.shade: s300
  field: WaterIntake.TotalIntake
ensure yAxis AxisyduZwp color.value: blue color.shade: s300
  field: WaterIntake.TotalIntake

// layoutGrid, table, Table
ensure layoutGrid Table kind: table
  showComps: [WaterIntake.Date, WaterIntake.TotalIntake]
ensure style StyleCs28ev
  value: black
  fields: [WaterIntake.Date, WaterIntake.TotalIntake]
  fieldLayoutOn: header
  textStyleSet: ["bold"]
  textColor.value: white

ensure layout WaterChart kind: content
  displayLabel: "Daily water intake in ml"
  direction: vertical
  contentPadding: thick
  flexCenter.showBorderSet: ["top", "bottom", "left", "right"]
  flexCenter.showPaddingSet: ["top", "bottom", "left", "right"]
  flexCenter.padding: thick
  flexCenter.gridLayouts: [WaterIntake.XYChart]

ensure layout FoodChart kind: content
  displayLabel: "Daily total consumed calories"
  direction: vertical
  contentPadding: thick
  flexCenter.showBorderSet: ["top", "bottom", "left", "right"]
  flexCenter.showPaddingSet: ["top", "bottom", "left", "right"]
  flexCenter.padding: thick
  flexCenter.gridLayouts: [ConsumedCalories.Table]

ensure layout ExerciseChart kind: content
  displayLabel: "Daily total burned calories"
  direction: vertical
  contentPadding: thick
  flexCenter.showBorderSet: ["top", "bottom", "left", "right"]
  flexCenter.showPaddingSet: ["top", "bottom", "left", "right"]
  flexCenter.padding: thick
  flexCenter.gridLayouts: [BurnedCalories.Table]

ensure layout SleepChart kind: content
  displayLabel: "Daily total hours of sleep"
  direction: vertical
  contentPadding: thick
  flexCenter.showBorderSet: ["top", "bottom", "left", "right"]
  flexCenter.showPaddingSet: ["top", "bottom", "left", "right"]
  flexCenter.padding: thick
  flexCenter.gridLayouts: [Sleep.XYChart]

ensure layout Calories kind: content
  displayLabel: "Daily consumed vs burned calories"
  direction: vertical
  contentPadding: thick
  flexCenter.showBorderSet: ["top", "bottom", "left", "right"]
  flexCenter.showPaddingSet: ["top", "bottom", "left", "right"]
  flexCenter.padding: thick
  flexCenter.gridLayouts: [ConsumedVsBurned.XYChart]

ensure layout CustomLayoutReport kind: content
  direction: vertical
  contentPadding: thick
  start.formLayouts: [WaterChart, FoodChart, ExerciseChart, SleepChart, Calories]

d. WaterIntakeReport

ensure report WaterIntakeReport kind: query
  modules: ["Fitness"]
  inputForm: FilterActivityDashboard
  outputForm: OutputActivityDashboard
  fromSpreadsheets: [FitnessSheet]
  neoQL: "SELECT
    ${ss:s22.Details.Date} as ${out:WaterIntake.Date},
    SUM(${ss:s22.Water.Intake}) as ${out:WaterIntake.TotalIntake}
  FROM ${ss}
  WHERE ${ctx:row.type} = ${ss:s22}
    AND ${in:Details.FromDate} <= ${ss:s22.Details.Date}
    AND ${in:Details.ToDate} > ${ss:s22.Details.Date}
    AND ${ss:s22.Details.Activity.optionId} = 'keyWater'
  GROUP BY ${ss:s22.Details.Date}
  ORDER BY ${ss:s22.Details.Date} ASC
  LIMIT 7"

e. FoodReport

ensure report FoodReport kind: query
  modules: ["Fitness"]
  inputForm: FilterActivityDashboard
  outputForm: OutputActivityDashboard
  fromSpreadsheets: [FitnessSheet]
  neoQL: "SELECT
      ${ss:s22.Details.Date} as ${out:ConsumedCalories.Date},
      SUM(${ss:s22.Food.TotalCalories}) as ${out:ConsumedCalories.TotalCaloriesCount}
    FROM ${ss}
    WHERE ${ctx:row.type} = ${ss:s22}
      AND ${in:Details.FromDate} <= ${ss:s22.Details.Date}
      AND ${in:Details.ToDate} > ${ss:s22.Details.Date}
      AND ${ss:s22.Details.Activity.optionId} = 'keyFood'
    GROUP BY ${ss:s22.Details.Date}
    ORDER BY ${ss:s22.Details.Date} ASC
    LIMIT 7"

f. SleepReport

ensure report SleepReport kind: query
  modules: ["Fitness"]
  inputForm: FilterActivityDashboard
  outputForm: OutputActivityDashboard
  fromSpreadsheets: [FitnessSheet]
  neoQL: "SELECT
      ${ss:s22.Sleep.FromDate} as ${out:Sleep.Date},
      SUM(${ss:s22.Sleep.TotalHours}) as ${out:Sleep.TotalHours}
    FROM ${ss}
    WHERE ${ctx:row.type} = ${ss:s22}
      AND ${in:Details.FromDate} <= ${ss:s22.Sleep.FromDate}
      AND ${in:Details.ToDate} > ${ss:s22.Sleep.ToDate}
      AND ${ss:s22.Details.Activity.optionId} = 'keySleep'
    GROUP BY ${ss:s22.Sleep.FromDate}
    ORDER BY ${ss:s22.Sleep.FromDate} ASC
    LIMIT 7"

g. WaterIntakeReport

ensure report ExerciseReport kind: query
  modules: ["Fitness"]
  inputForm: FilterActivityDashboard
  outputForm: OutputActivityDashboard
  fromSpreadsheets: [FitnessSheet]
  neoQL: "SELECT
      ${ss:s22.Details.Date} as ${out:BurnedCalories.Date},
      SUM(${ss:s22.Exercise.BurnedCalories}) as ${out:BurnedCalories.TotalCaloriesBurned}
    FROM ${ss}
    WHERE ${ctx:row.type} = ${ss:s22}
      AND ${in:Details.FromDate} <= ${ss:s22.Details.Date}
      AND ${in:Details.ToDate} > ${ss:s22.Details.Date}
      AND ${ss:s22.Details.Activity.optionId} = 'keyExercise'
    GROUP BY ${ss:s22.Details.Date}
    ORDER BY ${ss:s22.Details.Date} ASC
    LIMIT 7"

h. ConsumVsBurnReport

ensure report ConsumedVsBurnedReport kind: query
  modules: ["Fitness"]
  inputForm: FilterActivityDashboard
  outputForm: OutputActivityDashboard
  fromSpreadsheets: [FitnessSheet]
  neoQL: "With q1 as (
    SELECT
      ${ss:s22.Details.Date} as `date`,
      SUM(${ss:s22.Exercise.BurnedCalories}) as `burnedCalories`
    FROM ${ss}
    WHERE ${ctx:row.type} = ${ss:s22}
      AND ${in:Details.FromDate} <= ${ss:s22.Details.Date}
      AND ${in:Details.ToDate} > ${ss:s22.Details.Date}
      AND ${ss:s22.Details.Activity.optionId} = 'keyExercise'
    GROUP BY ${ss:s22.Details.Date}
    ORDER BY ${ss:s22.Details.Date} ASC
    LIMIT 7
    ),
    q2 as (
    SELECT
      ${ss:s22.Details.Date} as `date`,
      SUM(${ss:s22.Food.TotalCalories}) as `consumedCalories`
    FROM ${ss}
    WHERE ${ctx:row.type} = ${ss:s22}
      AND ${in:Details.FromDate} <= ${ss:s22.Details.Date}
      AND ${in:Details.ToDate} > ${ss:s22.Details.Date}
      AND ${ss:s22.Details.Activity.optionId} = 'keyFood'
    GROUP BY ${ss:s22.Details.Date}
    ORDER BY ${ss:s22.Details.Date} ASC
    LIMIT 7
    )

    SELECT
      q2.date as ${out:ConsumedVsBurned.Date},
      q2.consumedCalories as ${out:ConsumedVsBurned.ConsumedCalories},
      q1.burnedCalories as ${out:ConsumedVsBurned.BurnedCalories}
    FROM q1
    JOIN q2 ON q1.date = q2.date"

i. FitnessDashboard

ensure report FitnessDashboard kind: composite
  modules: ["Fitness"]
  inputForm: FilterActivityDashboard
  outputForm: OutputActivityDashboard
  mergeReports: [
    WaterIntakeReport,
    FoodReport,
    SleepReport,
    ExerciseReport,
    ConsumedVsBurnedReport
  ]

Frontend

1. ActivityDashboard

ensure action ActivityDashboard kind: report
  label: "Activity Dashboard"
  modules: ["Fitness"]
  icon: "CategoryRounded"
  increaseAsideWidth: true
  report: FitnessDashboard
  outputFormContentLayout: CustomLayoutReport

2. Group actions

Group these actions under a section named LastPass for easy access.

ensure group MyFitnessPal
  pinnedActions: [ActivityDashboard]
  pinnedActionSetMobile: [ActivityDashboard]
  actionPermission: {
      'ActivityDashboard': {
        'menuGroup': '2',
        'roles': [
          'Member'
        ]
      }
    }