Custom Vue Renderer for Dynamic Chart Generation

This challenge asks you to implement a custom renderer for Vue.js that dynamically generates charts based on data passed as a prop. Building a custom renderer allows for greater control over how components are rendered and provides a powerful way to integrate third-party libraries or create highly specialized visualizations. This is particularly useful when dealing with complex data visualizations like charts, graphs, or diagrams.

Problem Description

You need to create a Vue component called DynamicChart that utilizes a custom renderer to display a chart. The component will receive data and chart type as props. The custom renderer will use the h function (createElement) to generate the necessary HTML elements to represent the chart. For simplicity, the chart will be represented as a simple bar chart using <div> elements. The height of each bar will be proportional to the data value.

What needs to be achieved:

Create a Vue component DynamicChart that accepts data (an array of numbers) and chartType (a string, either "bar") as props.
Implement a custom renderer within DynamicChart that uses the h function to generate a bar chart based on the provided data.
The bar chart should display each data point as a <div> element.
The height of each bar should be proportional to the data value, scaled to fit within a maximum height of 100px.
Each bar should have a class of "bar".

Key Requirements:

The component must be a functional component.
The custom renderer must be used within the render function.
The chart type is currently only supported for "bar". If a different chart type is provided, the component should render an error message.
The component should handle empty data arrays gracefully by displaying a message "No data to display."

Expected Behavior:

When the DynamicChart component receives data and a chart type of "bar", it should render a bar chart where each bar's height corresponds to its data value, scaled to a maximum height of 100px. If the data is empty, it should display "No data to display." If the chart type is anything other than "bar", it should display "Unsupported chart type."

Edge Cases to Consider:

Empty data array.
Invalid chart type.
Data values that are very large or very small (consider scaling).
Data values that are negative (for simplicity, treat them as zero).

Examples

Example 1:

Input: data = [10, 20, 30, 40, 50], chartType = "bar"
Output: A bar chart with 5 bars. The first bar has a height proportional to 10, the second to 20, and so on, all scaled to a maximum height of 100px. Each bar has the class "bar".
Explanation: The component iterates through the data array and creates a div for each value, setting its height based on the value scaled to 100px.

Example 2:

Input: data = [], chartType = "bar"
Output: The text "No data to display."
Explanation: The component checks if the data array is empty and displays the appropriate message.

Example 3:

Input: data = [10, 20, 30], chartType = "line"
Output: The text "Unsupported chart type."
Explanation: The component checks if the chart type is "bar" and displays an error message if it's not.

Constraints

The maximum height of any bar should be 100px.
The component must be written in TypeScript.
The component should be a functional component.
The data array will contain only numbers.
Performance is not a primary concern for this challenge; focus on correctness and clarity.

Notes

You can use the h function (createElement) to create HTML elements.
Consider using CSS to style the bars (e.g., setting the height using the style attribute).
The scaling factor can be calculated as value / Math.max(...data) * 100 (or a similar approach to handle cases where the maximum value is zero). Handle the case where Math.max(...data) is zero to avoid division by zero.
Remember to import defineComponent and h from Vue.
Focus on the core rendering logic; you don't need to implement a full-fledged charting library. A simple bar chart representation is sufficient.