From @knowbody on January 3, 2016 17:52

A more advanced guide for building / babelifying from src/ not lib/ for tighter, fully source-mapped builds.

Based on the #144 and chat with @ryan-roemer

Copied from original issue: FormidableLabs/victory#146

Maybe this is another dropdown?

from @boygirl : Ecology takes a dropdowns prop takes an array of name, options objects, and then whichever thing is selected ends up on context, this.context.[name]: { selectedOption }
<Ecolgoy dropdowns={[{name: "theme", options: [null, VictoryTheme.material], selected: 0}]} />

From @david-davidson on December 23, 2015 18:38

We have great per-component docs right now, but it'd be nice to have an equally great high-level overview that walks through the dev process from npm install through rendering a composed chart.

• We could start with a look at our (arbitrary) data and a screenshot of the desired outcome.
• Next, we'd walk through the installation process: npm install, etc.
• Step by step, we'd build out the chart components (with a screenshot at every major step) until we have what we want!

If we wanted to get real fancy, we could even put the sample chart in a standalone repo and, after every major step, link to a diff of the relevant commit(s).

(Note that this could also replace the current contents of /docs [a.k.a. "Getting started"] in the docs site.)

Copied from original issue: FormidableLabs/victory#124

This spacing is a bit tight:

Some of the examples are not correctly styled to work on smaller screens

An extraneous <style> tag is getting rendered along with the docs component:

(Both 260 and 292 are VictoryTheme, and 293 is media queries)

Removing <Style rules={theme}/> tag in the /docs/victory-component/docs.js component in favor of /docs/app.js will resolve the duplication and still keep styled docs when running builder run docs-dev locally.

There are several places to remove:

• victory-chart/docs/victory-area/docs.js
• victory-chart/docs/victory-axis/docs.js
• victory-chart/docs/victory-bar/docs.js
• victory-chart/docs/victory-chart/docs.js
• victory-chart/docs/victory-line/docs.js
• victory-chart/docs/victory-scatter/docs.js
• victory-core/docs/victory-animation/docs.js
• victory-core/docs/victory-label/docs.js
• victory-pie/docs/docs.js

Directive from boss: Homepage is too minimalist, needs higher information density.

Here is the planned redesign:
homepage

Some optional questions to answer:

• What does it make you think of?
• How does it make you feel?
• Is it engaging?
• Does it resonate with you?

So that we can do things like, https://lodash.com/docs#pick

Is it possible to reflow charting components for wider screens, so that they are larger for wider screens, and stay just as small and readable for narrow screens?

Could this be achieved by adding flex properties to the parent <svg>? (i dunno!)

A chart needs to be at the top of the page. Decrease the spacing between each heading.

Change github & gitter icons to buttons/links with text.

Add comments to the playgrounds to indicate they are editable. Eventually, add back the "live preview" and "editable source" to the playgrounds.

now that we have inbounds to pages other than the lander (theme park, woot!) we should have easy access to those from any page

Context: Each Victory Component has its own <Docs /> component that runs <Ecology /> on the repo’s latest README.md.

Question: Is it possible to determine whether the link leaves or stays on the documentation site and add the appropriate icon?

e.g.

From @david-davidson on January 13, 2016 2:33

When rebuilding the site, @coopy and I noticed that an old bundle.{hash}.js hadn't been removed. Let's make sure we have the clean plugin set up properly. :)

Copied from original issue: FormidableLabs/victory#160

• Showcase page should live in the About page, formidable.com/open-source/victory/about
• In the repo, it should be a new component at src/screens/about/components/showcase.js
• For each app/usage, there should be:
  • a screenshot
  • the name of the company that uses it
  • one or two sentences that provide context: who is using it, how are they using it, and what they are using it for (or whatever context makes the most sense)
• Finally, there should be a link to the showcase on the homepage. Somewhere. Maybe the logos stay on the homepage and there’s a call to action to the showcase. Maybe the showcase link needs to be farther up on the page. I'm not clear on this part yet.

From @coopy on February 5, 2016 19:33

The existing example in victory-examples is an important piece of documentation, as it shows users how to compose standalone VictoryLine and VictoryAxis components in an svg tag, while maintaining control over domain and scale.

Let's clean up the victory-examples repo and add it as a part of victory.formidable.com under e.g. "composing charts from standalone components".

Copied from original issue: FormidableLabs/victory#196

From @coopy on March 5, 2016 5:46

To show interesting content when posted on Facebook; e.g.

<meta property="og:title" content="Victory" />
<link href="victory-logo.png" rel="image_src">
<meta property="og:url" content="http://victory.formidable.com" />
<meta property="og:image" content="victory-logo.png" />

See http://ogp.me/

Copied from original issue: FormidableLabs/victory#221

See http://formidable.com/open-source/victory/sugar-mama

This will allow us to npm link them and test out updates to the dox easily

Goal: Make Victory look robust and fully-featured—this is not a toy.

Tasks:

• Keep the current first chart
• Directly underneath the first chart, add 2 or 3 complicated charts: Economist chart and LiveChart, perhaps a third to demonstrate how much Victory can actually do
• Rework the typography to be skimmable and easily readable

The V logo at the top of the sidebar is hidden now, because the sidebar scrolls.

From @coopy on March 18, 2016 23:48

• Simple doesn't mention builder
• Advanced introduces builder

Copied from original issue: FormidableLabs/victory#230

From @knowbody on December 30, 2015 0:5

Not sure if this should be here or in the ecology issues.

Probably we want to use something like:

overflow-wrap: break-word;

Copied from original issue: FormidableLabs/victory#137

Styles & Tooltip are not getting the full height, but Central Axis, Data Component, and Multiple Axes does.

/cc @kylecesmat

We should either make the container wider, or the text smaller for this case.

From @coopy on January 6, 2016 21:45

There are some gotchas when you're setting up the dev environment to contribute to the Victory ecosystem. Consider adding a script to help npm link clones of victory components.

Copied from original issue: FormidableLabs/victory#151

From @david-davidson on January 13, 2016 2:28

@coopy and I noticed that linting wasn't catching mixed single/double quotes in the docs site. We should review our linting setup and make sure it's working properly!

Copied from original issue: FormidableLabs/victory#159

Suggested layout:

Column 1:

• VictoryCore
• VictoryAnimation

Column 2:

• VictoryChart
• (indented list of chart subcomponents)

Column 3:

• VictoryPie
• (list of components coming soon, greyed out with "coming soon" text)

Currently every page has the same <title>, because it lives in <head>.

Add react-document-title to change the page title.

/: Victory
/docs: Victory | Documentation
/docs/victory-component: VictoryComponent | Documentation

Requirements:

• Add dropdown of pre-defined data sets, see FormidableLabs/ecology#33
• Add "export to gist" or "link to gist" buttons, see FormidableLabs/ecology#31
• Add "export the code" buttons that would download a file with the code. Alternatively, copy selected code to clipboard.

Implement these new features of ecology into the victory docs.

In the process of setting up automatic deployment, this repo was made private. However, it should (and can) be made public again!

This may require reconfiguring travis’s encrypted environment key that access the formidable.com server.

Instructions for Travis

To hookup travis, first, convert the SSH key to .pem format:

openssl rsa -in id_rsa -out deploy_static.pem

Then, encrypt the key with the travis gem, which will generate encrypted environment variables on travis. It will modify the .travis.yml file to add the decryption step, and any comments/formatting will be lost. (Note: encrypted environment variables are not available for pull requests from forks.)

gem install travis
travis encrypt-file ~/.ssh/deploy_static.pem --add

Make sure the .travis.yml configuration file does not preserve any of the filepath, e.g. ~/.ssh/ from the example above.

As discussion with Marketing, Victory could improve with a more robust Getting Started Guide or a Troubleshooting/FAQ Guide.

Unlike the other documentation, Getting Started Guide lives in this repo. If there's a more visible place for these guides to be seen in one of the victory repos, I'm happy if things get moved around 🎷 just do it.

/cc @kenwheeler @ebrillhart

Changes to the homepage:

• Ditch "Try it" text.
• Ditch editor's note about component playground.
• Ditch "Benefits" header.

FRIENDLY

• Move first example under Friendly heading.

FLEXIBLE

• Economist chart should go under Flexible. Fixed height for code block since it's long—code will scroll.
• Put style & data in variables beneath the Victory code.
• Copy should update to reflect the deeply customizable aspect.

COMPOSABLE

• 3rd chart to be selected by @boygirl, should be simpler than Flexible example.

Add fourth heading:
RESPONSIVE & HYBRID (title TBD)

• React-Native capable.

Github & Gitter:

• Repeat near npm install & keep it below as well under LEARN MORE
• Maybe top are small github & gitter logos/icons?

LEARN MORE

• Change github & gitter links to super obvious, big buttons.

• Redirect victory.formidable.com to formidable.com/open-source/victory
• Redirect victory.formidable.com/docs/* to formidable.com/open-source/victory/docs/*

When highlighting the text in a code block, expect to see a background color change.

"Get started" should link to http://formidable.com/open-source/victory/docs/

Follow-up ticket: Improve "Getting started" documentation #75

From @boygirl on March 4, 2016 19:2

Copied from original issue: FormidableLabs/victory#220

http://formidable.com/open-source/victory/docs/ should have largely the same content as
https://github.com/FormidableLabs/victory#get-started:

• Add "Add Victory to your project: npm install victory --save" as a regular code block
• Add "Add your first Victory component" with the VictoryPie example as a Component Playground
• Add the "Including Components" section
• Add the "Components" section with links

Keep the "Contributing and Source" section as-is.

Ran into this issue trying to work on FormidableLabs/formidable-landers#23.

Basically, victory-docs requires componentry from victory-chart where ecology is used. In order to test why the flashing occurs in victory-docs, I wanted to npm-link my local ecology repo. victory-docs must be built built to observe the issue as we are using SSR. When I then ran builder run build-static, I receive an error about multiple instances of babel-polyfill.

Steps to reproduce:

• npm link ecology
• builder run build-static (not an issue with builder run dev)

Dump:

[builder:proc:start] Command: webpack --config node_modules/builder-docs-archetype/config/webpack/webpack.config.static.js --progress --bail
 95% emit

Error: only one instance of babel-polyfill is allowed
    at Object.<anonymous> (main:135:29064)
    at Object.<anonymous> (main:135:29521)
    at Object.<anonymous> (main:1:640)
    at t (main:1:352)
    at Object.e.(anonymous function).Object.(anonymous function).writable (main:135:26235)
    at Object.<anonymous> (main:1:640)
    at t (main:1:352)
    at Object.e.__esModule.default (main:135:26053)
    at Object.<anonymous> (main:1:640)
    at t (main:1:352)
[builder:proc:end:1] Command: webpack --config node_modules/builder-docs-archetype/config/webpack/webpack.config.static.js --progress --bail
[builder:builder-core:end:36271] Task: run webpack-static, Error: Command failed: webpack --config node_modules/builder-docs-archetype/config/webpack/webpack.config.static.js --progress --bail
 48[builder:proc:end:1] Command: builder run clean-static && builder run update-project && builder run webpack-static && builder run copy-assets
[builder:builder-core:end:36261] Task: run build-static, Error: Command failed: builder run clean-static && builder run update-project && builder run webpack-static && builder run copy-assets
 95% emit

Error: only one instance of babel-polyfill is allowed
    at Object.<anonymous> (main:135:29064)
    at Object.<anonymous> (main:135:29521)
    at Object.<anonymous> (main:1:640)
    at t (main:1:352)
    at Object.e.(anonymous function).Object.(anonymous function).writable (main:135:26235)
    at Object.<anonymous> (main:1:640)
    at t (main:1:352)
    at Object.e.__esModule.default (main:135:26053)
    at Object.<anonymous> (main:1:640)
    at t (main:1:352)
[builder:proc:end:1] Command: webpack --config node_modules/builder-docs-archetype/config/webpack/webpack.config.static.js --progress --bail
[builder:builder-core:end:36271] Task: run webpack-static, Error: Command failed: webpack --config node_modules/builder-docs-archetype/config/webpack/webpack.config.static.js --progress --bail
 48% 64/102 build modules

cc: @coopy @ryan-roemer @exogen

From @knowbody on January 3, 2016 17:51

Write a comprehensive guide of how to build Victory components in your project with webpack the "right" way considering:

• Source Maps
• Overall build composition
• Pointing to lib/ vs. src/
• Dependency management and flattening for things like lodash, React, et.c

This should go in the main victory README.

Copied from original issue: FormidableLabs/victory#145

Currently builder run build-static outputs this:

(sadface)

Now that we merged #96, we can (should!) do a few things:

• VictoryTheme Docs: link to Theme Park
• Theme Park: link to VictoryTheme Docs
• Theme Park: rename "default" -> "grayscale"
• Theme Park: use the "grayscale" source instead of importing
• Theme Park: break into smaller files for comprehension

cc @paulathevalley and @ebrillhart

https://formidable.com/open-source/victory redirects to https://formidable.com/open-source/victory/ (with the trailing slash)

This means it’s not getting crawled correctly and needs to be stopped!

Add a page to showcase the ability to theme Victory components. Ideally, there would be a playground with the theme object and a dropdown to change between themes. In the meantime, there could be a playground per theme until component-playground can support adding a dropdown to toggle the themes.

Victory themes live in victory-core, so if the route followed suit, it would be http://formidable.com/open-source/victory/docs/victory-theme
...since themes are little different from everything else, I could reason behind using a different route, for example, http://formidable.com/open-source/victory/themes/

• The about page should live at formidable.com/open-source/victory/about
• In the repo, it should be a new component at src/screens/about/index.js
• The page should contain:
  1. Showcase (with an anchor tag so we can link to it directly: formidable.com/open-source/victory/about#showcase)
  2. Origin of Victory story (including photos of the OG Formidable(s)?)
  3. Top 5? 8? contributors pulled from Github
  4. Formidable’s story