<% render partial: 'about/subnav' %>

<div class="box wide">

<h2>New users by month</h2>
<p>
Outliers:
2013-12 is the <a href="https://lobste.rs/s/orfht1/invitation_queue">invitation queue</a>;
2017-01 is the <a href="https://lobste.rs/s/kmj9w9/invitation_pledge_drive">pledge drive</a>
(<a href="https://lobste.rs/s/2scxd0/invitation_pledge_drive_results">results</a>)
</p>
<%= raw @users_graph %>

<h2>Active users by month</h2>
<p>Users who have submitted a story, posted a comment, or cast a vote<p>
<%= raw @active_users_graph %>

<h2>Stories submitted by month</h2>
<%= raw @stories_graph %>

<h2>Comments posted by month</h2>
<%= raw @comments_graph %>

<h2>Votes cast by month</h2>
<%= raw @votes_graph %>

<p>
Want more info?
<a href="/about#queries">Write a query</a>.
</p>

<style type="text/css">
.axis { stroke: var(--color-fg-contrast-4-5); }
.svgBackground { fill: var(--color-bg); }
.graphBackground { fill: var(--color-bg); }
.xAxisLabels { fill: var(--color-fg); }
.yAxisLabels { fill: var(--color-fg); }
.key1, .dataPoint1 { fill: #ac130d; }
circle:last-of-type { fill: #cccccc; }
.line1 { fill: #ac130d; }
.guideLines { stroke: var(--color-bg); stroke-dasharray: none; }
.dataPointPopupMask { fill: var(--color-fg); stroke: var(--color-bg); }
.dataPointPopup { fill: var(--color-fg); }
</style>

</div>
