PF6.Charts.Skeleton

Loading skeleton placeholders for every PF6.Charts chart type.

Use these in place of a real chart while data is loading. They match the chart's dimensions and show a shimmer animation consistent with PatternFly's skeleton component.

-- In your view:
if model.loading then
    Skeleton.area 560 250


else
    Area.fromData model.data
        |> Area.withWidth 560
        |> Area.toSvg

Cartesian skeletons

area : Int -> Int -> Html msg

Area chart skeleton. Pass the same width and height you use on the real chart.

line : Int -> Int -> Html msg

Line chart skeleton.

bar : Int -> Int -> Html msg

Bar chart skeleton.

scatter : Int -> Int -> Html msg

Scatter chart skeleton.

stack : Int -> Int -> Html msg

Stack chart skeleton.

threshold : Int -> Int -> Html msg

Threshold chart skeleton.

bullet : Int -> Int -> Html msg

Bullet chart skeleton.

boxPlot : Int -> Int -> Html msg

Box plot skeleton.

Circular skeletons

donut : Int -> Html msg

Donut chart skeleton. Pass size (the same value as Donut.withSize).

donutUtilization : Int -> Html msg

Donut utilization chart skeleton.

pie : Int -> Html msg

Pie chart skeleton.

Inline skeletons

sparkline : Int -> Int -> Html msg

Sparkline skeleton. Pass the same width and height as Sparkline.withWidth/withHeight.

lenards/elm-patternfly-charts/1.0.1

PF6.Charts.Skeleton

Cartesian skeletons

Circular skeletons

Inline skeletons

Modules

PF6.Charts