Merge branch 'master' into timefilterfix

bin/version

 #!/usr/bin/env bash
 
-VERSION="v0.23.0"
+VERSION="v0.24.0-snapshot"
 
 # dynamically pull more interesting stuff from latest git commit
 HASH=$(git show-ref --head --hash=7 head)            # first 7 letters of hash should be enough; that's what GitHub uses

docs/users-guide/04-visualizing-results.md

@@ -12,6 +12,7 @@ In Metabase, an answer to a question can be visualized in a number of ways:
 * Area chart
 * Scatterplot or bubble chart
 * Pie/donut chart
+* Funnel
 * Map
 
 To change how the answer to your question is displayed, click on the Visualization dropdown menu beneath the question builder bar.
@@ -29,14 +30,26 @@ Each visualization type has its own advanced options you can tweak. Just click t
 #### Numbers
 This option is for displaying a single number, nice and big. The options for numbers include adding character prefixes or suffixes to it (so you can do things like put a currency symbol in front or a percent at the end), setting the number of decimal places you want to include, and multiplying your result by a number (like if you want to multiply a decimal by 100 to make it look like a percent).
 
+![Number](images/visualizations/number.png)
+
 #### Progress bars
 Progress bars are for comparing a single number result to a goal value that you input. Open up the chart options for your progress bar to choose a goal for it, and Metabase will show you how far away your question's current result is from the goal.
 
+![Progress bar](images/visualizations/progress.png)
+
 #### Tables
-The Table option is good for looking at tabular data (duh), or for lists of things like users. The options allow you to hide and rearrange fields in the table you're looking at.
+The Table option is good for looking at tabular data (duh), or for lists of things like users. The options allow you to hide and rearrange fields in the table you're looking at. If your table is a result that contains one metric and two dimensions, Metabase will also automatically pivot your table, like in the example below (the example shows the count of orders grouped by the review rating for that order and the category of the product that was purchased; you can tell it's pivoted because the grouping field values are all in the first column and first row). You can turn this behavior off in the chart settings.
+
+![Pivot table](images/visualizations/pivot.png)
 
 #### Line, bar, and area charts
-Line charts are best for displaying the trend of a number over time, especially when you have lots of x-axis values. Bar charts are great for displaying a metric grouped by a category (e.g., the number of users you have by country), and they can also be useful for showing a number over time if you have a smaller number of x-axis values (like orders per month this year). Area charts are useful when comparing the the proportions between two metrics over time. Both bar and area charts can be stacked.
+Line charts are best for displaying the trend of a number over time, especially when you have lots of x-axis values. Bar charts are great for displaying a metric grouped by a category (e.g., the number of users you have by country), and they can also be useful for showing a number over time if you have a smaller number of x-axis values (like orders per month this year).
+
+![Bar chart](images/visualizations/bar.png)
+
+Area charts are useful when comparing the the proportions between two metrics over time. Both bar and area charts can be stacked.
+
+![Stacked area chart](images/visualizations/area.png)
 
 These three charting types have very similar options, which are broken up into the following:
 
@@ -52,18 +65,34 @@ If you have a third numeric field, you can also create a bubble chart. Select th
 
 Scatterplots and bubble charts also have similar chart options as line, bar, and area charts.
 
+![Scatter](images/visualizations/scatter.png)
+
 #### Pie or donut charts
 A pie or donut chart can be used when breaking out a metric by a single dimension, especially when the number of possible breakouts is small, like users by gender. If you have more than a few breakouts, like users by country, it's usually better to use a bar chart so that your users can more easily compare the relative sizes of each bar.
 
 The options for pie charts let you choose which field to use as your measurement, and which one to use for the dimension (i.e., the pie slices). You can also customize the pie chart's legend, whether or not to show each slice's percent of the whole in the legend, and the minimum size a slice needs to be in order for it to be displayed.
 
+![Donut](images/visualizations/donut.png)
+
+#### Funnel
+Funnels are commonly used in e-commerce or sales to visualize how many customers are present within each step of a checkout flow or sales cycle. At their most general, funnels show you values broken out by steps, and the percent decrease between each successive step. To create a funnel in Metabase, you'll need to have a table with at least two columns: one column that contains the metric you're interested in, and another that contains the funnel's steps.
+
+For example, I might have an Opportunities table, and I could create a question that gives me the number of sales leads broken out by a field that contains stages such as `Prospecting`, `Qualification`, `Proposal`, `Negotiation`, and `Closed`. In this example, the percentages shown along the x-axis tell you what percent of the total starting opportunities are still present at each subsequent step; so 18.89% of our total opportunities have made it all the way to being closed deals. The number below each percent is the actual value of the count at that step — in our example, the actual number of opportunities that are currently at each step. Together, these numbers help you figure out where you're losing your customers or users.
+
+![Funnel](images/visualizations/funnel.png)
+
 #### Maps
 When you select the Map visualization setting, Metabase will automatically try and pick the best kind of map to use based on the table or result set you're currently looking at. Here are the maps that Metabase uses:
 
 * **United States Map** — Creating a map of the United States from your data requires your results to contain a column field with states. This lets you do things like visualize the count of your users broken out by state, with darker states representing more users.
 * **Country Map** — To visualize your results in the format of a map of the world broken out by country, your result must contain a field with countries. (E.g., count of users by country.)
+
+![Region map](images/visualizations/map.png)
+
 * **Pin Map** — If your table contains a latitude and longitude field, Metabase will try to display it as a pin map of the world. This will put one pin on the map for each row in your table, based on the latitude and longitude fields. You can try this with the Sample Dataset that's included in Metabase: start a new question and select the People table, use `raw data` for your view, and choose the Map option for your visualization. you'll see a map of the world, with each dot representing the latitude and longitude coordinates of a single person from the People table.
 
+![Pin map](images/visualizations/pin-map.png)
+
 When you open up the Map options, you can manually switch between a region map (i.e., United States or world) and a pin map. If you're using a region map, you can also choose which field to use as the measurement, and which to use as the region (i.e. State or Country).
 
 Metabase now also allows administrators to add custom region maps via GeoJSON files through the Metabase Admin Panel.

frontend/src/metabase/css/core/text.css

@@ -90,6 +90,10 @@
   line-height: 1.5em;
 }
 
+.text-small {
+    font-size: 0.875em;
+}
+
 .text-current {
     color: currentColor;
 }

frontend/src/metabase/home/components/RecentViews.jsx

@@ -5,13 +5,9 @@ import Icon from "metabase/components/Icon.jsx";
 import SidebarSection from "./SidebarSection.jsx";
 import Urls from "metabase/lib/urls";
 
-export default class RecentViews extends Component {
-    constructor(props, context) {
-        super(props, context);
-
-        this.state = { error : null };
-    }
+import { normal } from "metabase/lib/colors";
 
+export default class RecentViews extends Component {
     static propTypes = {
         fetchRecentViews: PropTypes.func.isRequired,
         recentViews: PropTypes.array.isRequired
@@ -22,46 +18,46 @@ export default class RecentViews extends Component {
     }
 
     async componentDidMount() {
-        try {
-            await this.props.fetchRecentViews();
-        } catch (error) {
-            this.setState({ error });
-        }
+        this.props.fetchRecentViews();
     }
 
-    renderIllustration(item) {
-        if (item.model === 'card' && 'display' in item.model_object) {
-            return (
-                <Icon name={'illustration-'+item.model_object.display} size={22} />
-            );
-
-        } else if(item.model === 'dashboard') {
-            return (
-                <Icon name={'illustration-dashboard'} size={22} />
-            );
-
+    getIconName({ model, model_object}) {
+        if (model === 'card' && 'display' in model_object) {
+            return model_object.display
+        } else if(model === 'dashboard') {
+            return 'dashboard'
         } else {
             return null;
         }
     }
 
     render() {
-        let { recentViews } = this.props;
-
+        const { recentViews } = this.props;
         return (
             <SidebarSection title="Recently Viewed" icon="clock">
                 {recentViews.length > 0 ?
                     <ul className="p2">
-                        {recentViews.map((item, index) =>
-                            <li key={index} className="py1 ml1 flex align-center clearfix">
-                                {this.renderIllustration(item)}
-                                <Link to={Urls.modelToUrl(item.model, item.model_id)} data-metabase-event={"Recent Views;"+item.model+";"+item.cnt} className="ml1 flex-full link">{item.model_object.name}</Link>
-                            </li>
-                        )}
+                        {recentViews.map((item, index) => {
+                            const iconName = this.getIconName(item);
+                            return (
+                                <li key={index} className="py1 ml1 flex align-center clearfix">
+                                    <Icon
+                                        name={iconName}
+                                        size={18}
+                                        style={{ color: iconName === 'dashboard' ? normal.purple : normal.blue }}
+                                    />
+                                    <Link to={Urls.modelToUrl(item.model, item.model_id)} data-metabase-event={"Recent Views;"+item.model+";"+item.cnt} className="ml1 flex-full link">
+                                        {item.model_object.name}
+                                    </Link>
+                                </li>
+                            );
+                        })}
                     </ul>
                 :
                     <div className="flex flex-column layout-centered text-normal text-grey-2">
-                        <p className="p3 text-centered text-grey-2" style={{ "maxWidth": "100%" }}>You haven't looked at any dashboards or questions recently</p>
+                        <p className="p3 text-centered text-grey-2" style={{ "maxWidth": "100%" }}>
+                            You haven't looked at any dashboards or questions recently
+                        </p>
                     </div>
                 }
             </SidebarSection>

frontend/src/metabase/pulse/components/PulseEditChannels.jsx

@@ -160,6 +160,9 @@ export default class PulseEditChannels extends Component {
         let isValid = this.props.pulseIsValid && channelIsValid(channel, channelSpec);
         return (
             <li key={index} className="py2">
+                { channelSpec.error &&
+                    <div className="pb2 text-bold text-error">{channelSpec.error}</div>
+                }
                 { channelSpec.recipients &&
                     <div>
                         <div className="h4 text-bold mb1">To:</div>

frontend/src/metabase/query_builder/components/dataref/FieldPane.jsx

@@ -122,13 +122,13 @@ export default class FieldPane extends Component {
         }
 
         if (isSummable(field)) {
-            usefulQuestions.push(<QueryButton icon="illustration-icon-scalar" text={"Sum of all values of " + fieldName} onClick={this.setQuerySum} />);
+            usefulQuestions.push(<QueryButton icon="number" text={"Sum of all values of " + fieldName} onClick={this.setQuerySum} />);
         }
-        usefulQuestions.push(<QueryButton icon="illustration-icon-table" text={"All distinct values of " + fieldName} onClick={this.setQueryDistinct} />);
+        usefulQuestions.push(<QueryButton icon="table" text={"All distinct values of " + fieldName} onClick={this.setQueryDistinct} />);
         let queryCountGroupedByText = "Number of " + inflection.pluralize(tableName) + " grouped by " + fieldName;
         if (validBreakout) {
-            usefulQuestions.push(<QueryButton icon="illustration-icon-bars" text={queryCountGroupedByText} onClick={this.setQueryCountGroupedBy.bind(null, "bar")} />);
-            usefulQuestions.push(<QueryButton icon="illustration-icon-pie" text={queryCountGroupedByText} onClick={this.setQueryCountGroupedBy.bind(null, "pie")} />);
+            usefulQuestions.push(<QueryButton icon="bar" text={queryCountGroupedByText} onClick={this.setQueryCountGroupedBy.bind(null, "bar")} />);
+            usefulQuestions.push(<QueryButton icon="pie" text={queryCountGroupedByText} onClick={this.setQueryCountGroupedBy.bind(null, "pie")} />);
         }
 
         return (

frontend/src/metabase/query_builder/components/dataref/MetricPane.jsx

@@ -65,7 +65,7 @@ export default class MetricPane extends Component {
         let useForCurrentQuestion = [];
         let usefulQuestions = [];
 
-        usefulQuestions.push(<QueryButton icon="illustration-icon-scalar" text={"See " + metricName} onClick={this.setQueryMetric} />);
+        usefulQuestions.push(<QueryButton icon="number" text={"See " + metricName} onClick={this.setQueryMetric} />);
 
         return (
             <DetailPane

frontend/src/metabase/query_builder/components/dataref/SegmentPane.jsx

@@ -89,8 +89,8 @@ export default class SegmentPane extends Component {
             useForCurrentQuestion.push(<UseForButton title={"Filter by " + segmentName} onClick={this.filterBy} />);
         }
 
-        usefulQuestions.push(<QueryButton icon="illustration-icon-scalar" text={"Number of " + segmentName} onClick={this.setQueryCountFilteredBy} />);
-        usefulQuestions.push(<QueryButton icon="illustration-icon-table" text={"See all " + segmentName} onClick={this.setQueryFilteredBy} />);
+        usefulQuestions.push(<QueryButton icon="number" text={"Number of " + segmentName} onClick={this.setQueryCountFilteredBy} />);
+        usefulQuestions.push(<QueryButton icon="table" text={"See all " + segmentName} onClick={this.setQueryFilteredBy} />);
 
         return (
             <DetailPane

frontend/src/metabase/query_builder/components/dataref/TablePane.jsx

@@ -61,7 +61,7 @@ export default class TablePane extends Component {
             var queryButton;
             if (table.rows != null) {
                 var text = `See the raw data for ${table.display_name}`
-                queryButton = (<QueryButton className="border-bottom border-top mb3" icon="illustration-icon-table" text={text} onClick={this.setQueryAllRows} />);
+                queryButton = (<QueryButton className="border-bottom border-top mb3" icon="table" text={text} onClick={this.setQueryAllRows} />);
             }
             var panes = {
                 "fields": table.fields.length,