Commit 2a62e0da authored by Paul Asmuth's avatar Paul Asmuth
Browse files

examples layout

parent d7df6a60

doc/Rakefile

+34 −3
Original line number Diff line number Diff line
@@ -58,6 +58,25 @@ class DocApp < Sinatra::Base 
    render_with_layout

  end



  get "/examples" do

    @title = "Examples"

    @route = "/index"

    @yield = render(:erb, IO.read(File.join(BASEDIR, 'web/examples.erb')))

    render_with_layout

  end



  get "/examples/*" do

    params[:splat] ||= ["index"]

    @route = "/#{params[:splat] * "/"}"

    @example = CONFIG["examples"]

        .map { |g| g["examples"].map{ |e| e.merge("group" => g) } }

        .flatten

        .find { |e| e["url"] == @route }

    @title = "Examples"

    @yield = render(:erb, IO.read(File.join(BASEDIR, 'web/examples.erb')))

    render_with_layout

  end



  ["/documentation", "/documentation/*"].each do |route|

    get route do

      params[:splat] ||= ["index"]
@@ -104,15 +123,27 @@ task :render do 
  builder = SinatraStatic.new(DocApp)

  target = File.join(BASEDIR, "target")



  routes = %w{/ /documentation /documentation/support

    /documentation/license /documentation/downloads /screenshots

  routes = %w{

    /

    /examples

    /documentation

    /documentation/support

    /documentation/license

    /documentation/downloads

    /documentation/examples/fm_classic_simple_example

    /documentation/examples/fm_classic_full_example}

    /documentation/examples/fm_classic_full_example

    /screenshots}



  CONFIG["sitemap"].values.flatten.each do |page|

    routes << "/documentation#{page["url"]}"

  end



  CONFIG["examples"].each do |example_group|

    example_group["examples"].each do |example|

        routes << "/examples#{example["url"]}"

    end

  end



  routes.each do |path|

    puts "  + #{path}"

    builder.send(:build_path, path, target)

doc/config.yml

+154 −0
Original line number Diff line number Diff line 
---



examples:



  -

    title: "Line Charts"

    dir: "linecharts"

    examples:

      -

        title: "Simple line chart"

        file: "horizontal_bars"

        url: "/linecharts/simple_lines"

      -

        title: "Lines with points"

        file: "horizontal_bars"

        url: "/barcharts/horizontal_bars"

      -

        title: "Lines with time domain"

        file: "horizontal_bars"

        url: "/barcharts/horizontal_bars"

      -

        title: "Multiple Y Axis"

        file: "horizontal_bars"

        url: "/barcharts/horizontal_bars"

      -

        title: "Line and Point styles"

        file: "horizontal_bars"

        url: "/barcharts/horizontal_bars"

      -

        title: "Lines with error bars"

        file: "horizontal_bars"

        url: "/barcharts/horizontal_bars"

      -

        title: "Lines with legend"

        file: "horizontal_bars"

        url: "/barcharts/horizontal_bars"

      -

        title: "Axis styles"

        file: "horizontal_bars"

        url: "/barcharts/horizontal_bars"



  -

    title: "Area Charts"

    dir: "areacharts"

    examples:

      -

        title: "Simple area chart"

        file: "horizontal_bars"

        url: "/barcharts/horizontal_bars"

      -

        title: "Areas with borders/points"

        file: "horizontal_bars"

        url: "/barcharts/horizontal_bars"

      -

        title: "Stacked areas"

        file: "horizontal_bars"

        url: "/barcharts/horizontal_bars"

      -

        title: "Area ranges"

        file: "horizontal_bars"

        url: "/barcharts/horizontal_bars"

      -

        title: "Areas with lines"

        file: "horizontal_bars"

        url: "/barcharts/horizontal_bars"



  -

    title: "Bar Charts"

    dir: "barcharts"

    examples:

      -

        title: "Horizontal bar chart"

        file: "horizontal_bars"

        url: "/barcharts/horizontal_bars"

      -

        title: "Vertical bar chart"

        file: "horizontal_bars"

        url: "/barcharts/horizontal_bars"

      -

        title: "Multiple series, unstacked"

        file: "horizontal_bars"

        url: "/barcharts/horizontal_bars"

      -

        title: "Multiple series, stacked"

        file: "horizontal_bars"

        url: "/barcharts/horizontal_bars"

      -

        title: "Bars with negative values"

        file: "horizontal_bars"

        url: "/barcharts/horizontal_bars"

      -

        title: "Horizontal range bars"

        file: "horizontal_bars"

        url: "/barcharts/horizontal_bars"

      -

        title: "Histogram"

        file: "horizontal_bars"

      -

        title: "Bars with lines"

        file: "horizontal_bars"

        url: "/barcharts/horizontal_bars"

      -

        title: "Bars with labels"

        file: "horizontal_bars"

        url: "/barcharts/horizontal_bars"



  -

    title: "Point/Bubble Charts"

    dir: "barcharts"

    examples:

      -

        title: "Simple point chart"

        file: "horizontal_bars"

        url: "/barcharts/horizontal_bars"

      -

        title: "3D bubble chart"

        file: "horizontal_bars"

        url: "/barcharts/horizontal_bars"

      -

        title: "Multiple point series"

        file: "horizontal_bars"

        url: "/barcharts/horizontal_bars"

      -

        title: "Points with labels"

        file: "horizontal_bars"

        url: "/barcharts/horizontal_bars"

      -

        title: "Points with middle axis"

        file: "horizontal_bars"

        url: "/barcharts/horizontal_bars"



  -

    title: "Custom styles"

    dir: "styles"

    examples:

      -

        title: "Default Style"

        file: "horizontal_bars"

        url: "/barcharts/horizontal_bars"

      -

        title: "Dark Style"

        file: "horizontal_bars"

        url: "/barcharts/horizontal_bars"



  -

    title: "Dashboards"

    dir: "dashboards"

    examples:

      -

        title: "Web application"

        file: "horizontal_bars"

        url: "/barcharts/horizontal_bars"



#  * horizontal with labels outside

#  * horizontal with labels inside

#  * multiple y axis



sitemap:

doc/web/assets/documentation.css

+45 −4
Original line number Diff line number Diff line
@@ -160,7 +160,6 @@ hr { 
  width:210px;

  padding-top:15px;

  position: absolute;

  margin-left: -210px;

}



#navigation ul {
@@ -202,14 +201,14 @@ hr { 


#documentation {

  padding: 25px 40px;

  float:left;

  color: #333;

  font-size: 14px;

  line-height:24px;

  border-left:1px solid #c7c9cc;

  background:#fff;

  padding-bottom:70px;

  min-height:1200px;

  margin-left: 210px;

  min-height:1400px;

}



#documentation_wrap {
@@ -221,7 +220,6 @@ hr { 
  overflow:hidden;

  max-width:1200px;

  background:#f4f4f4;

  padding-left: 210px;

}



#documentation h3 {
@@ -363,3 +361,46 @@ pre.dark code { 
  border-bottom: 1px solid rgba(255,255,255,0.3);

  box-shadow: 0 0 2px rgba(0,0,0,1.0);

}



.example_frame {

  border-top: 1px solid #ddd;

  border-bottom: 1px solid #ddd;

  margin: 15px 0;

  padding: 10px 0;

}



#documentation p.breadcrumb {

  margin-bottom: 40px;

  font-size: 90%;

  margin-top: -5px;

}



.optbar {

  margin-top: 10px;

}



.optbar a {

  margin-left: 10px;

  border: 1px solid #ddd;

  border-radius: 5px;

  padding: 5px 10px;

  cursor: pointer;

}



#documentation .optbar a:hover {

  text-decoration: none;

  background:#06c;

  border: 1px solid #fff;

  color: #fff;

}



#documentation .optbar a.active {

  background:#333;

  border: 1px solid #fff;

  color: #fff;

}



.optbar, .optbar h4 {

  line-height: 36px;

  display: inline-block;

}

doc/web/documentation.erb

+2 −1
Original line number Diff line number Diff line
@@ -4,8 +4,9 @@ 
    <div id="header">

      <a class="menu" href="/documentation/support">Support</a>

      <a class="menu" href="http://github.com/paulasmuth/fnordmetric" target="_blank">Github</a>

      <a class="menu" href="/screenshots">Screenshots</a>

      <a class="menu" href="/download">Download</a>

      <a class="menu" href="/documentation">Documentation</a>

      <a class="menu" href="/examples">Examples</a>

      <h1><a href="/">FnordMetric</a></h1>

    </div>

doc/web/examples.erb

0 → 100644
+82 −0
Original line number Diff line number Diff line 
<div class="colorstripe"></div>

<div class="colorbg">

  <div id="wrap" class="<%= @doc_yield ? :large : nil %>" style="padding-top:25px;">

    <div id="header">

      <a class="menu" href="/documentation/support">Support</a>

      <a class="menu" href="http://github.com/paulasmuth/fnordmetric" target="_blank">Github</a>

      <a class="menu" href="/download">Download</a>

      <a class="menu" href="/documentation">Documentation</a>

      <a class="menu" href="/examples">Examples</a>

      <h1><a href="/">FnordMetric</a></h1>

    </div>



    <div id="documentation_wrap">

      <div class="headbar">Examples</div>



      <div id="navigation">

        <ul>

          <li class="<%= @route == "/index" ? :active : nil %>">

            <a href="/examples">Examples</a>

          </li>

        </ul>



        <% CONFIG["examples"].each do |example_group| %>

          <a class="nav_title">

            <%= example_group["title"] %>

          </a>

          <ul>

            <% example_group["examples"].each do |example| %>

              <li class="<%= @route == example["url"] ? :active : nil %>">

                <a href="/examples<%= example["url"] %>">

                  <%= example["title"] %>

                </a>

              </li>

            <% end %>

          </ul>

        <% end %>

      </div>



      <% if @route == "/index" %>

        <div id="documentation">

        </div>

      <% else %>

        <div id="documentation">

          <h2><%= @example["title"] %></h2>

          <p class="breadcrumb">

            <a href="/examples">

              Examples

            </a>

            &raquo;

            <a href="/examples/<%= @example["group"]["dir"] %>">

              <%= @example["group"]["title"] %>

            </a>

            &raquo;

            <a href="/examples<%= @example["url"] %>">

              <%= @example["title"] %>

            </a>

          </p>



          <h4>SVG Output</h4>

          <div class="example_frame">

            <%= IO.read(File.join(BASEDIR, "../examples#{@example["url"]}.svg")) %>

          </div>



          <div class="optbar">

            <h4>View Source: </h4>

            <a class="active">SQL</a>

            <a>C++</a>

          </div>

          <pre style="margin-top: 0;"><code>asdasdas</code></pre>

        </div>

      <% end %>





    </div>

  </div>

  <div class="biglink" style="margin-top:70px;">

    <a href="http://github.com/paulasmuth/fnordmetric" target="_blank">

      Watch FnordMetric on Github &rarr;

    </a>

  </div>

</div>

CRA Git | Maintained and supported by SUSTech CRA and CCSE