Create a new design for survey dashboards

[tsv2013]

[JaneSjs]

Related inquiries:

• Dashboard - Introduce an option to easily colorize dashboard using custom colors
• [React Typescript] Customize devices in Preview tab - Specify the position where the device is located in the Preview tab

[tsv2013]

User inquiries:

#426 - UI improvements
#519 - New visualizers

[tsv2013]

May be it's better to go from results nature to understand how to show them better.

The first demo is a good starting point: https://surveyjs.io/dashboard/examples/interactive-survey-data-dashboard/reactjs

On the left side - visualizers for a question where answer is a one number. We get an array of numbers to visualize. We can show this data as:

• average/min/max - and show aggregated results as a number, or gauge or a bullet
• numbers distribution - and show this distribution as histogram (a bar chart of certain appearance)
• NPS visualizer - if we threat numbers as a rate (satisfaction) value

On the right side - ordinary charts - visualize for single/multiple selection questions. Here we're showing a bar (vertical/horizontal), pie, doughnut to illustrate how many times each option was selected by user.
Some users ask us to show a table with count and percentage shown for each answer.

Average/min/max/histogram also can be used to visualize date/time data.

Text answers - we're using word cloud and table to illustrate such data - screenshots can be found in our documentation - https://surveyjs.io/dashboard/documentation/chart-types

We don't have a viszual representation for a range question, where we'll be need to visualize an array of pairs (of number or date/time type).

Every question type also can have a comment area which is shown as text answers.

After these "simple" questions we need to visualize complex cases - matrixes and panels, where different questions are grouped somehow by rows/columns.

And a standalone case - a table (grid) with whole set of answers - https://surveyjs.io/dashboard/examples/export-survey-results-to-csv-files/reactjs

[mikeamelin]

The first part — https://www.figma.com/design/kcv7fIVU80GWsK3EQG97k3/Dashboard-Previews?m=auto&t=cEyULyz2qWV4omg6-6

— general layout
— dashboard item
— matrix dashboard item
— diagram
— bar chart
— legend
— chart toolbar
— tooltip
— table
— table view
— data (progress bar) visualizer
— NPS visualizer
— guage