[gallery]Show popular + non-legacy charts when modal opens by default for quick selection

[junlincc]

Part of the follow up tasks for SIP-67

1. Add tag metadata to all charts
2. Ability of sorting charts by tag from modal UI - as mockup in SIP (UI)
3. Group high usage & non-legacy charts into Popular tags - Big Numbers, Echarts Times-series(Bar,Line, Scatter, Area), Echarts Pie, Table, Pivot table v2, Bar non time series, Big Number. Big Number w Trendline
4. When users open the modal, Popular tag should be pre-selcted for user to locate highly used and well maintained charts by default.

Tag for each chart as follow, welcome suggestions for chart description and tags improvement

Name	Old Category	New Category	Description	Tags (up to 10)
Area Chart	Distribution	Evolution	A time series chart that visualizes how a related metric from multiple groups vary over time. Each group is visualized using a different color.	Aesthetic, Comparison, Continuous, Legacy, Line, Percentages, Popular, Proportional, Single Metric, Stacked, Time, Trend, nvd3
Bar Chart	Composition	Ranking	Compares metrics from different categories using bars. Bar lengths are used to indicate the magnitude of each value and color is used to differentiate groups.	Additive, Categorical, Comparison, Discrete, Distribution, Legacy, Percentages, Popular, Stacked, Vertical, nvd3
Big Number	Composition	KPI	Showcases a single metric front-and-center. Big number is best used to call attention to a KPI or the one thing you want your audience to focus on.	Additive, Business, Description, Formattable, Legacy, Percentages, Popular, Report, Single Metric
Big Number with Trendline	Time Series	KPI	Showcases a single number accompanied by a simple line chart, to call attention to an important metric along with its change over time or other dimension.	Advanced-Analytics, Description, Formattable, Line, Percentages, Popular, Report, Single Metric, Trend
Box Plot	Distribution	Distribution	Also known as a box and whisker plot, this visualization compares the distributions of a related metric across multiple groups. The box in the middle emphasizes the mean, median, and inner 2 quartiles. The whiskers around each box visualize the min, max, range, and outer 2 quartiles.	ECharts, Range, Statistical
Bubble Chart	Relationship	Correlation	Visualizes a metric across three dimensions of data in a single chart (X axis, Y axis, and bubble size). Bubbles from the same group can be showcased using bubble color.	Aesthetic, Comparison, Legacy, Multi-Dimensions, Multiple Metrics, Scatter, Time, Trend, nvd3
Bullet Chart	Relationship	KPI	Showcases the progress of a single metric against a given target. The higher the fill, the closer the metric is to the target.	Business, Legacy, Report, Single Metric, nvd3
Calendar Heatmap	Time Series	Correlation	Visualizes how a metric has changed over a time using a color scale and a calendar view. Gray values are used to indicate missing values and the linear color scheme is used to encode the magnitude of each day's value.	Business, Comparison, Intensity, Pattern, Report, Single Metric, Trend
Chord Diagram	Relationship	Flow	Showcases the flow or link between categories using thickness of chords. The value and corresponding thickness can be different for each side.	Aesthetic, Circular, Legacy, Proportional, Relational, Single Metric
Country Map	Geospatial	Map	Visualizes how a single metric varies across a country's principal subdivisions (states, provinces, etc) on a chloropleth map. Each subdivision's value is elevated when you hover over the corresponding geographic boundary.	2D, Comparison, Geo, Range, Report, Single Metric, Stacked
deck.gl 3D Hexagon	Geospatial	Map	Overlays a hexagonal grid on a map, and aggregates data within the boundary of each cell.	3D, Comparison, Experimental, Geo, deckGL
deck.gl Arc	Geospatial	Map	Plot the distance (like flight paths) between origin and destination.	3D, Geo, Relational, Web, deckGL
deck.gl Geojson	Geospatial	Map		2D, Aesthetic, deckGL
deck.gl Grid	Geospatial	Map		3D, Comparison, Experimental, deckGL
deck.gl Multiple Layers	Geospatial	Map		Multi-Layers, deckGL
deck.gl Path	Geospatial	Map		Web, deckGL
deck.gl Polygon	Geospatial	Map		3D, Experimental, Geo, Multi-Dimensions, Single Metric, deckGL
deck.gl Scatterplot	Geospatial	Map	A map that takes rendering circles with a variable radius at latitude/longitude coordinates	2D, Comparison, Geo, Intensity, Popularity, Scatter, deckGL
deck.gl Screen Grid	Geospatial	Map	Aggregates data within the boundary of grid cells and maps the aggregated values to a dynamic color scale	Comparison, Experimental, Intensity, Popularity, deckGL
Dual Line Chart	Time Series	Evolution	Visualizes 2 metrics as line plots using the same x-axis. This chart is useful for comparing metrics across the same time range.	Dual Metrics, Legacy
Event Flow	Distribution	Flow	Compares the lengths of time different activities take in a shared timeline view.	Legacy, Progressive
Filter box	Tools	Tools	Chart component that lets you add a custom filter UI in your dashboard. When added to dashboard, a filter box lets users specify specific values or ranges to filter charts by. The charts that each filter box is applied to can be fine tuned as well in the dashboard view. Note that this plugin is being replaced with the new Filters feature that lives in the dashboard view itself. It's easier to use and has more capabilities!	Predictive
Funnel Chart	Distribution	KPI	Showcases how a metric changes as the funnel progresses. This classic chart is useful for visualizing drop-off between stages in a pipeline or lifecycle.	Business, ECharts, Progressive, Report, Sequential, Single Metric, Trend
Gauge Chart	Composition	KPI	Uses a gauge to showcase progress of a metric towards a target. The position of the dial represents the progress and the terminal value in the gauge represents the target value.	Business, Comparison, ECharts, Multi-Variables, Report, Single Metric
Graph Chart	Relationship	Flow	Displays connections between entities in a graph structure. Useful for mapping relationships and showing which nodes are important in a network. Graph charts can be configured to be force-directed or circulate. If your data has a geospatial component, try the deck.gl Arc chart.	Aesthetic, Circular, Comparison, Directional, ECharts, Relational, Single Metric, Structural, Transformable
Heatmap	Composition	Correlation	Visualize a related metric across pairs of groups. Heatmaps excel at showcasing the correlation or strength between two groups. Color is used to emphasize the strength of the link between each pair of groups.	Business, Intensity, Legacy, Popularity, Predictive, Single Metric
Histogram	Distribution	Distribution	Take your data points, and group them into "bins" to see where the densest areas of information lie	Comparison, Legacy, Pattern, Range
Horizon Chart	Distribution	Distribution	Compares how a metric changes over time between different groups. Each group is mapped to a row and change over time is visualized bar lengths and color.	Legacy
Line Chart	Time Series	Evolution	Classic chart that visualizes how metrics change over time.	Aesthetic, Legacy, nvd3
MapBox	Geospatial	Map		Business, Intensity, Legacy, Popularity, Scatter, Transformable
Mixed timeseries chart	Time Series	Evolution	Visualize two different time series using the same x-axis time range. Note that each time series can be visualized differently (e.g. 1 using bars and 1 using a line).	Advanced-Analytics, Aesthetic, ECharts, Experimental, Line, Multi-Variables, Predictive, Time, Transformable
Multiple Line Charts	Distribution	Evolution	Visualize two different time series using the same x-axis time range. This chart is being deprecated and we recommend using the Mixed Timeseries Chart instead!	Comparison, Legacy, Multi-Layers, Multi-Variables, Time, nvd3
Nightingale Rose Chart	Distribution	Ranking	A polar coordinate chart where the circle is broken into wedges of equal angle, and the value represented by any wedge is illustrated by its area, rather than its radius or sweep angle.	Advanced-Analytics, Circular, Legacy, Multi-Layers, Pattern, Time, Trend
Paired t-test Table	Relationship	Correlation	Table that visualizes paired t-tests, which are used to understand statistical differences between groups.	Legacy, Statistical, Tabular
Parallel Coordinates	Relationship	Ranking	Plots the individual metrics for each row in the data vertically and links them together as a line. This chart is useful for comparing multiple metrics across all of the samples or rows in the data.	Coordinates, Directional, Legacy, Relational
Partition Chart	Relationship	Part of a Whole	Compare the same summarized metric across multiple groups.	Categorical, Comparison, Legacy, Proportional
Pie Chart	Composition	Part of a Whole	The classic. Great for showing how much of a company each investor gets, what demographics follow your blog, or what portion of the budget goes to the military industrial complex. Pie charts can be difficult to interpret precisely. If clarity of relative proportion is important, consider using a bar or other chart type instead.	Aesthetic, Categorical, Circular, Comparison, Percentages, Popular, Proportional, Single Metric
Pivot Table	Relationship	Table	Used to summarize a set of data by grouping together multiple statistics along two axes. Examples: Sales numbers by region and month, tasks by status and assignee, active users by age and location. This chart is being deprecated and we recommend checking out Pivot Table V2 instead!	Legacy
Pivot Table v2	Relationship	Table	Used to summarize a set of data by grouping together multiple statistics along two axes. Examples: Sales numbers by region and month, tasks by status and assignee, active users by age and location. Not the most visually stunning visualization, but highly informative and versatile.	Additive, Report, Tabular
Radar Chart	Composition	Ranking	Visualize a parallel set of metrics across multiple groups. Each group is visualized using its own line of points and each metric is represented as an edge in the chart.	Business, Comparison, Coordinates, Multi-Variables, Report, Web
Sankey Diagram	Relationship	Flow	Visualizes the flow of different group's values through different stages of a system. New stages in the pipeline are visualized as nodes or layers. The thickness of the bars or edges represent the metric being visualized.	Categorical, Directional, Distribution, Legacy, Percentages, Proportional, Relational, Single Metric
Sunburst Chart	Composition	Part of a Whole	Uses circles to visualize the flow of data through different stages of a system. Hover over individual paths in the visualization to understand the stages a value took. Useful for multi-stage, multi-group visualizing funnels and pipelines.	Aesthetic, Dual Metrics, Legacy, Multi-Levels, Proportional
Table	Composition	Table	Classic row-by-column spreadsheet like view of a dataset. Use tables to showcase a view into the underlying data or to show aggregated metrics.	Additive, Business, Description, Formattable, Pattern, Popular, Report, Sequential, Tabular
Time-series Bar Chart	Time Series	Evolution	Visualize how a metric changes over time using bars. Add a group by column to visualize group level metrics and how they change over time.	Advanced-Analytics, Percentages, Proportional, Stacked, Time, Trend, Vertical
Time-series Chart	Time Series	Evolution	Swiss army knife for visualizing time series data. Choose between step, line, scatter, and bar charts. This viz type has many customization options as well.	Advanced-Analytics, Aesthetic, ECharts, Line, Predictive, Time, Transformable
Time-series Percent Change	Time Series	Evolution	Visualizes many different time-series objects in a single chart. This chart is being deprecated and we recommend using the Time-series Chart instead.	Advanced-Analytics, Comparison, Legacy, Line, Percentages, Predictive, Time, Trend, nvd3
Time-series Period Pivot	Time Series	Evolution		Legacy, Single Metric, Time, nvd3
Time-series Table	Time Series	Table	Compare multiple time series charts (as sparklines) and related metrics quickly.	Advanced-Analytics, Comparison, Description, Legacy, Multi-Variables, Percentages, Tabular, Trend
Tree Chart	Relationship	Part of a Whole	Visualize multiple levels of hierarchy using a familiar tree-like structure.	Categorical, ECharts, Multi-Levels, Relational, Single Metric, Structural
Treemap	Composition	Part of a Whole	Shows the composition of a dataset by segmenting a given rectangle as smaller rectangles with areas proportional to their value or contribution to the whole. Those rectangles may also, in turn, be further segmented hierarchically.	Categorical, Distribution, Legacy, Multi-Levels, Percentages, Proportional
Treemap v2	Relationship	Part of a Whole	Show hierarchical relationships of data, with with the value represented by area, showing proportion and contribution to the whole.	Aesthetic, Categorical, Comparison, ECharts, Multi-Levels, Percentages, Proportional, Single Metric
Word Cloud	Composition	Ranking	Visualizes the words in a column that appear the most often. Bigger font corresponds to higher frequency.	Aesthetic, Categorical, Comparison, Description, Popularity, Single Metric
World Map	Geospatial	Map	A map of the world, that can indicate values in different countries.	2D, Aesthetic, Comparison, Intensity, Legacy, Multi-Dimensions, Multi-Layers, Multi-Variables, Popular, Scatter, Single Metric

[junlincc]

@stephenLYZ @xiezhongfu team, this is high priority. Please tag this issue for each related PR and close issue once all 4 tasks are done. We don't need to add tags to all charts yet. only those that are not controversial, like Popular, Echarts, Advanced-analytics.